本文实例讲述了微信小程序实现图片滚动效果。分享给大家供大家参考,具体如下:
效果:左右滑动可以切换展示图片
代码:
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% ; } |
运行结果: