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