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

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

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

您可能感兴趣的文章:

• 微信小程序 scroll-view隐藏滚动条详解
• 微信小程序（九）scroll-view组件详细介绍
• 微信小程序 scroll-view实现上拉加载与下拉刷新的实例
• 微信小程序 scroll-view组件实现列表页实例代码
• 微信小程序 scroll-view实现锚点滑动的示例
• 微信小程序 两种滑动方式（横向滑动，竖向滑动）详细及实例代码
• 微信小程序侧边栏滑动特效(左右滑动)
• 微信小程序左右滑动切换页面详解及实例代码
• 微信小程序图片横向左右滑动案例
• 微信小程序scroll-view仿拼多多横向滑动滚动条