小程序实现图片左右滚动，是图片基本的实现效果，那么这种图片左右滚动效果要如何实现?
小程序图片左右滚动效果图：
wxml代码：
<scroll-view scroll-x="true">
<view class="uploadWrap" scroll-x="true">
<view class="upload_Item">
<image class="upload_Item_img" src="https://www.kesion.com/image/test1.jpg"></image>
</view>
<view class="upload_Item">
<image class="upload_Item_img" src="https://www.kesion.com/image/test2.jpg"></image>
</view>
<view class="upload_Item">
<image class="upload_Item_img" src="https://www.kesion.com/image/test3.jpg"></image>
</view>
<view class="upload_Item">
<image class="upload_Item_img" src="https://www.kesion.com/image/test4.jpg"></image>
</view>
<view class="upload_Item">
<image class="upload_Item_img" src="https://www.kesion.com/image/test1.jpg"></image>
</view>
<view class="upload_Item">
<image class="upload_Item_img" src="https://www.kesion.com/image/test2.jpg"></image>
</view>
<view class="upload_Item">
<image class="upload_Item_img" src="https://www.kesion.com/image/test3.jpg"></image>
</view>
</view>
</scroll-view>
wxss代码：
.uploadWrap{height:160rpx; width:100%; display: flex; display: -webkit-box; flex-direction: column;}
.upload_Item{ width: 160rpx; height: 160rpx; flex: 1;}
.upload_Item_img{ width: 160rpx; height: 160rpx;}
wxml从后台获取数据代码：
<scroll-view scroll-x="true">
<view class="uploadWrap" scroll-x="true" >
<view class="upload_Item" wx:for="{{imgUrls}}" wx:key="id">
<image class="upload_Item_img" src="{{item.imgurl}}"data-id="{{item.id}}" bindtap="changeMainImgFn2"></image>
<icon type="clear" size="16" class="upload_Btn" color="#f64400"></icon>
<view class="upload_mask {{upload_ImgSelId2==item.id? 'show':' ' }}">主图</view>
</view>
</view>
</scroll-view>
小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。
有关进一步了解小程序开发案例，请前往：https://www.kesion.com/miniprogramdev/
小程序显示图片相关文章：
小程序加载图片如何实现
小程序开发上传图片如何实现
小程序上传图片组件及上传多张图片
7*24小时售后支持
故障及时处理
价格透明
优秀的团队服务
8年对“设计创新”坚持
42名有想法有激情的队友
1000多家忠实客户
技术性团队
经验丰富
产品多样
服务精细
