本文实例讲述了微信小程序实现图片滚动效果。分享给大家供大家参考,具体如下:
效果:左右滑动可以切换展示图片
代码:
<!--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:
page({ data: { imgurls:[ 'https://gss0.baidu.com/9fo3dsag_xi4khgko9wtanf6hhy/zhidao/wh%3d600%2c800/sign=8b20fba45e6034a829b7b087fb23656c/14ce36d3d539b60028f67d12eb50352ac65cb75e.jpg', 'https://gss0.baidu.com/9vo3dsag_xi4khgko9wtanf6hhy/zhidao/wh%3d600%2c800/sign=3386e39a49fbfbeddc0c3e7948c0db0e/32fa828ba61ea8d3943606a1950a304e251f587a.jpg', 'http://img04.sogoucdn.com/app/a/100520093/ca86e620b9e623ff-d72d635343d5bade-dcf2acda7a45cb44f172db138bdf8d2d.jpg', ] }, //事件处理函数 toupper:function(){ console.log("触发了toupper"); } })
pages/test/test.wxss:
.img{ width: 100%; }
运行结果:
心得:
autoplay=”true”
希望本文所述对大家微信小程序开发有所帮助。
如对本文有疑问, 点击进行留言回复!!
asp.net core 连接 docker apollo 获取不到数据,返回null
asp.net中ajax和一般处理程序(handler.ashx)的交互
egg.js创建项目,目录介绍,简单使用,sequelize mysql使用
网友评论