微信小程序——srcoll-view 实现水平滑动失效

微信小程序——srcoll-view 实现水平滑动失效

srcoll-view标签官方使用文档

想要实现srcoll-view标签水平滑动三要素

1. 允许srcoll-view使用横向滚动，设置srcoll-view标签属性 scroll-x=“true” ;
2. 强制该元素内子元素不换行，可在srcoll-view中CSS样式中添加代码 white-space:nowrap;
3. srcoll-view内子元素不可独占一行，即为行内或行内块元素，可在子元素使用代码 display:inline-block。

代码实现

小程序代码片段
代码如下：

1. html

   	<!-- 水平滑块 -->
   	<scroll-view class="scroll" scroll-x="true">
   	  <view class="scroll-box">1</view>
   	  <view class="scroll-box">2</view>
   	  <view class="scroll-box">3</view>
   	  <view class="scroll-box">4</view>
   	  <view class="scroll-box">5</view>
   	</scroll-view>
   

2. CSS

   	.scroll{
   	  background-color: red;
   	  white-space: nowrap;
   	}
   	.scroll .scroll-box{
   	  display: inline-block;
   	  height: 200rpx;
   	  width: 200rpx;
   	  background-color: pink;
   	}
   	.scroll-box:nth-child(odd){
   	  background-color: skyblue;
   	}