微信小程序横向左右滑动案例

图片左右滑动效果

效果图：

wxml代码：

[html]  view plain  copy

 print ?

1. <scroll-view scroll-x="true">  
2. <view class="uploadWrap" scroll-x="true">  
3.   <view class="upload_Item">  
4.     <image class="upload_Item_img"  src="../../image/test1.jpg"></image>  
5.   </view>  
6.   <view class="upload_Item">  
7.     <image class="upload_Item_img"  src="../../image/test2.jpg"></image>  
8.   </view>  
9.   <view class="upload_Item">  
10.     <image class="upload_Item_img"  src="../../image/test3.jpg"></image>  
11.   </view>  
12.   <view class="upload_Item">  
13.     <image class="upload_Item_img"  src="../../image/test4.jpg"></image>  
14.   </view>  
15.   <view class="upload_Item">  
16.     <image class="upload_Item_img"  src="../../image/test1.jpg"></image>  
17.   </view>  
18.   <view class="upload_Item">  
19.     <image class="upload_Item_img"  src="../../image/test2.jpg"></image>  
20.   </view>  
21.   <view class="upload_Item">  
22.     <image class="upload_Item_img"  src="../../image/test3.jpg"></image>  
23.   </view>  
24.   
25. </view>  
26. </scroll-view>  

wxss代码：

[html]  view plain  copy

 print ?

1. .uploadWrap{height:160rpx; width:100%; display: flex; display: -webkit-box; flex-direction: column;}  
2. .upload_Item{ width: 160rpx; height: 160rpx;  flex: 1;}  
3. .upload_Item_img{ width: 160rpx; height: 160rpx;}  

wxml从后台获取数据代码：

[html]  view plain  copy

 print ?

1. <scroll-view scroll-x="true">  
2.   <view class="uploadWrap" scroll-x="true" >  
3.     <view class="upload_Item" wx:for="{{imgUrls}}" wx:key="id">  
4.       <image class="upload_Item_img" src="{{item.imgurl}}"data-id="{{item.id}}" bindtap="changeMainImgFn2"></image>  
5.       <icon type="clear" size="16" class="upload_Btn" color="#f64400"></icon>  
6.       <view class="upload_mask {{upload_ImgSelId2==item.id? 'show':' ' }}">主图</view>  
7.     </view>  
8.   </view>  
9. </scroll-view>