900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 微信小程序scroll-view 横向滚动 显示下拉条的问题

微信小程序scroll-view 横向滚动 显示下拉条的问题

时间:2018-12-06 05:10:20

相关推荐

微信小程序scroll-view 横向滚动 显示下拉条的问题

微信小程序开发中,scroll-view的横向滚动,是一个常见的排列布局的方式,其实现的代码如下:

wxml部分:

<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%"><view id="demo" class="scroll-view-item_H demo-text-1">1</view><view id="demo" class="scroll-view-item_H demo-text-2">2</view><view id="demo" class="scroll-view-item_H demo-text-3">3</view><view id="demo" class="scroll-view-item_H demo-text-3">4</view><view id="demo" class="scroll-view-item_H demo-text-3">5</view></scroll-view>

wxss部分:

.scroll-view_H{white-space: nowrap;}.scroll-view-item{height: 300rpx;}.scroll-view-item_H{display: inline-block;width: 36%;height: 300rpx;background-color: pink;margin-right: 20rpx;}

其实现效果图:

但是在苹果机型左右滑动总出现下拉条,很影响美观,这个时候在css部分增加一行代码就能解决这样的问题:

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。