微信小程序中的scroll-view组件的使用(横向滚动)
1. 需要将srcoll-view的父元素设置宽度,以及ovflow: hidden;white-space: no-wrap;
2. 滚动元素设置为display: inline-block;
代码:
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;
}