微信小程序-横向滑动scroll-view隐藏滚动条

傷城~ 2022-05-16 14:41 367阅读 0赞

文章转载自：https://blog.csdn.net/qq_24734285/article/details/53912799

wxml

  1. <scroll-view class="recommend_scroll_x_box" scroll-x="true">
  2.     <view class="recommend_hot_box" wx:for="{
  3.    {hotList}}">
  4.         <image src="{
  5.    {item.pic}}" class="recommend_hot_image"></image>
  6.     </view>
  7. </scroll-view>

wxss

  1. .recommend_scroll_x_box {
  2.     height: 245rpx;
  3.     white-space: nowrap;
  4.     display: flex;
  5. }
  7. ::-webkit-scrollbar {
  8.     width: 0;
  9.     height: 0;
  10.     color: transparent;
  11. }
  13. .recommend_hot_box {
  14.     width: 230rpx;
  15.     height: 245rpx;
  16.     margin-right: 24rpx;
  17.     display: inline-block;
  18. }
  20. .recommend_hot_image {
  21.     width: 230rpx;
  22.     height: 143rpx;
  23. }

js

  1. Page({
  2.     data: {
  3.         hotList: [
  4.         {
  5.             pic: '/images/example2.png',
  6.             title: '玻璃棧道',
  7.             desc: '22W人去過'
  8.         }, {
  9.             pic: '/images/example2.png',
  10.             title: '玻璃棧道',
  11.             desc: '22W人去過'
  12.         }, {
  13.             pic: '/images/example2.png',
  14.             title: '玻璃棧道',
  15.             desc: '22W人去過'
  16.         }, {
  17.             pic: '/images/example2.png',
  18.             title: '玻璃棧道',
  19.             desc: '22W人去過'
  20.         }, {
  21.             pic: '/images/example2.png',
  22.             title: '玻璃棧道',
  23.             desc: '22W人去過'
  24.         }]
  25.     }
  26. })

最后，根据网友“夸克逃逸”的提醒，强调一下最主要的代码是wxss里的这行：

  1. ::-webkit-scrollbar {
  2.     width: 0;
  3.     height: 0;
  4.     color: transparent;
  5. }

发表评论

表情：
评论列表 （有 0 条评论，367人围观）

还没有评论，来说两句吧...

相关阅读