微信小程序scroll-view 左右滑动效果
页面:
<view class="scroll_box"> <scroll-view scroll-x> <view class="item_list" > 1 </view> <view class="item_list" > 2 </view> <view class="item_list" > 3 </view> <view class="item_list" > 4 </view> <view class="item_list" > 5 </view> <view class="item_list" > 6 </view> </scroll-view> </view>
样式
.scroll_box{ width: 100%; height: 307rpx; overflow: hidden; padding: 20rpx; background: #fff; white-space: nowrap; border: 1px solid red; } .scroll_box scroll-view{ height: 100%; width: auto; overflow:hidden; } .item_list{ width: 160rpx; height: 100%; margin-right: 23rpx; display: inline-block; margin-left: 10px; background-color: blue; }