小程序实现图片左右滚动效果

—— 2020 ——

09/27

00:00

来源：

作者：未知

栏目：小程序开发

2020/9/27 0:00:00 来源：不详作者：未知

　　小程序实现图片左右滚动效果

　　小程序实现图片左右滚动，是图片基本的实现效果，那么这种图片左右滚动效果要如何实现?

　　小程序图片左右滚动效果图：

小程序实现图片左右滚动效果

　　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/

小程序显示图片相关文章：

小程序加载图片如何实现

小程序开发上传图片如何实现

小程序上传图片组件及上传多张图片

【本站声明】
1、本站文章中所选用的图片及文字来源于网络以及用户投稿，由于未联系到知识产权人或未发现有关知识产权的登记，如有知识产权人并不愿意我们使用，如果有侵权请立即联系。
2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。

KESION 科汛软件
KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商，长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。
KESION 不断通过技术创新，提供产品和服务，助力企业向数字化转型，通过科技驱动商业革新，让商业变得更智慧！

▼点击进入科汛官网了解更多

热门标签

SaaS

上/下篇

微信小程序服务通知模板的实现

微信小程序服务通知对应的技术实现是模板消息,是需要做技术开发的,对于工程师们来说,看一下官方文档就能上手。...

微信小程序SaaS 2020/9/27 0:00:00
附近的小程序如何利用低成本给线下门店引流

附近的小程序的开放，给用户带来许多方便，附近的小程序可以将身在5km以内的商家显示在小程序列表，这种方式对用户以及对商家带来巨大改变，那么对于新商家要如何利用低成本引...

运营SaaS 2020/9/27 0:00:00

换一换相关推荐

精选内容

热点精选

© 2006-2026 厦门科汛软件有限公司版权所有

ICP证闽B2-20190777 闽ICP备06009871号-1

闽公网安备 35020302001540号统一社会信用代码：91350206MA2XN2XQ4A 国家高新技术企业编号：GR201735100465 软件企业证书号：厦RQ-2017-0034 软件产品证书号：厦RC-2017-0005 认证联盟企业编号：928180109031687687593 国际权威认证：信息技术服务管理体系标准（ISO 20000）信息安全管理体系国际认证（ISO/IEC 27001）