258资源分享网

横向滑动，如下

/*wxml*/ <view> <scroll-view class="demo-view-1" scroll-x="true"> <view class="bc_green bc_size inline"></view> <view class="bc_red bc_size inline"></view> <view class="bc_blue bc_size inline"></view> <view class="bc_pink bc_size inline"></view> <view class="bc_yellow bc_size inline"></view> <view class="bc_gray bc_size inline"></view> <view class="bc_tan bc_size inline"></view> </scroll-view> </view>

 

/*wxss*/ .demo-view-1{ white-space: nowrap; height: 300rpx; } .bc_green{ background-color: #00ff00; } .bc_red{ background-color: #ff0000; } .bc_blue{ background-color: #0000ff; } .bc_pink{ background-color: pink; } .bc_yellow{ background-color: yellow; } .bc_gray{ background-color: gray; } .bc_tan{ background-color: tan; } .inline{ display: inline-block; } .bc_size{ width: 300rpx; height: 300rpx; }

 

运行效果如下 

scroll-view标签上需要注意的属性，如下

属性名 说明 位置 备注
scroll-x   水平方向滑动时必须设置为true   scroll-view标签   只能在wxml中设置  
white-space   必须设置为nowrap   scroll-view标签   可以在wxss中设置  
display   必须设置为inline-block   scroll-view的子组件上   可以在wxss中设置  

display:inline-block，这对键值只需要在scroll-view的子组件上设置就可以了，scroll-view上不需要设置display属性，默认值即可。

竖直方向滑动，如下

/*wxml*/ <view> <scroll-view class="demo-view-2" scroll-y="true"> <view class="bc_green bc_size"></view> <view class="bc_red bc_size"></view> <view class="bc_blue bc_size"></view> <view class="bc_pink bc_size"></view> <view class=