微信小程序开发中,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;}