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

最新推荐文章于 2024-05-26 09:15:42 发布

游走走

最新推荐文章于 2024-05-26 09:15:42 发布

阅读量3.9w

点赞数 15

分类专栏： web 小程序

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_24734285/article/details/53912799

版权

web 同时被 2 个专栏收录

93 篇文章 1 订阅

订阅专栏

小程序

5 篇文章 0 订阅

订阅专栏

wxml

 <scroll-view class="recommend_scroll_x_box" scroll-x="true">
      <view class="recommend_hot_box" wx:for="{{hotList}}">
        <image src="{{item.pic}}" class="recommend_hot_image"></image>
      </view>
    </scroll-view>

wxss

.recommend_scroll_x_box {
  height: 245rpx;
  white-space: nowrap;
  display: flex;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.recommend_hot_box {
  width: 230rpx;
  height: 245rpx;
  margin-right: 24rpx;
  display: inline-block;
}

.recommend_hot_image {
  width: 230rpx;
  height: 143rpx;
}

Page({
  data: {
    hotList: [
      {
        pic: '/images/example2.png',
        title: '玻璃棧道',
        desc: '22W人去過'
      }, {
        pic: '/images/example2.png',
        title: '玻璃棧道',
        desc: '22W人去過'
      }, {
        pic: '/images/example2.png',
        title: '玻璃棧道',
        desc: '22W人去過'
      }, {
        pic: '/images/example2.png',
        title: '玻璃棧道',
        desc: '22W人去過'
      }, {
        pic: '/images/example2.png',
        title: '玻璃棧道',
        desc: '22W人去過'
      }
    ]
  }