1. 须要将srcoll-view的父元素设置宽度,以及ovflow: hidden;white-space: no-wrap;css
2. 滚动元素设置为display: inline-block;html
代码:小程序
view class="scroll-wrapper"> <scroll-view scroll-x="{{true}}" style="height: 140rpx;"> <image class="scroll-item" src="../../../assets/images/class/small/1.jpg"></image> <image class="scroll-item" src="../../../assets/images/class/small/2.jpg"></image> <image class="scroll-item" src="../../../assets/images/class/small/3.jpg"></image> <image class="scroll-item" src="../../../assets/images/class/small/1.jpg"></image> <image class="scroll-item" src="../../../assets/images/class/small/2.jpg"></image> <image class="scroll-item" src="../../../assets/images/class/small/2.jpg"></image> <image class="scroll-item" src="../../../assets/images/class/small/2.jpg"></image> </scroll-view> </view>
样式:微信小程序
.scroll-wrapper { width: 100%; overflow: hidden; white-space: nowrap; } .scroll-item { width: 140rpx; height: 140rpx; border-radius: 12rpx; margin-right: 16rpx; display: inline-block; } .scroll-item:last-child { margin-right: 0; }