南顺网络
微信小程序实现图片滚动效果示例
本文实例讲述了微信小程序实现图片滚动效果。分享给大家供大家参考，具体如下：
效果：左右滑动可以切换展示图片
代码：
1 2 3 4 5 6 7 | <!--pages/test/test.wxml--><!-- 组件 --><swiper> <swiper-item wx:for="{{imgUrls}}"> <image src='{{item}}' width="335" height="150" mode='widthFix' class='img' /> </swiper-item></swiper> |
pages/test/test.js：
1 2 3 4 5 6 7 8 9 10 11 12 13 | Page({ data: { imgUrls:[ ] }, //事件处理函数 toupper:function(){ console.log("触发了toupper"); }}) |
pages/test/test.wxss：
1 2 3 | .img{ width: 100%;} |
心得：
swiper组件：滑块视图容器。
可以为swiper添加autoplay属性，是之自动播放，例如：
autoplay=”true”swiper组件中使用的是image单标签，而不是双标签（否则报错）。
希望本文所述对大家微信小程序开发有所帮助。
编辑:--ns868
