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; }