微信小程序-横向滑动scroll-view隐藏滚动条
编程学习 2021-07-04 18:31www.dzhlxh.cn编程入门
本篇文章主要介绍了微信小程序-横向滑动scroll-view隐藏滚动条的相关知识。具有很好的参考价值。狼蚁网站SEO优化跟着长沙网络推广一起来看下吧
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人去過'
}
]
}
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持狼蚁SEO！