欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-08-27 23:09:21
wxml <...

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;
}

js

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人去過'
   }
  ]
 }

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!