
1、首念祥先打开微信开发者工具。
2、在项目文件目录中打开swiper.wxml文件。
3、然后设置swiper标签。
4、使用current属性来设置当前要播放哪张图片。
5、在swiper-item里面设置好要播的图片。乱姿
6、打开模拟器,显示绿色表示开启。
7、在窗口中我们可以看到当前播图仔陪搏的图片就是我们刚才所设置的。【点击了解更多加盟项目】
2019/2/22
index.wxml文件斗喊
index.js文件
图片数组 imageArr 动态的改变数组的数量,
例如:当 imageArr 中的长度为4,轮差御播滚动到 3 ,current=3;此时swiper没有绑定current,并将 imageArr 的长度动态改为2,这会出现current还空庆野是3,导致swiper不显示的问题。
解决:
index.wxml 中在swiper中绑定current
index.js 中增加current
bindChange为输入框发生改变事件。微信提供的bindchange在支持方面还有小问题,目前是失去焦点才能触发到此事件的发生。
如果在 bindchange的事件回物握芹调函数中使用 setData改变 current值,则有可能导致 setData被不停地调用,因而通常情况下请在改变 current值前检测 source字段来判断是否是由于用户触摸引起。
swiper里加了bindchange事件,有很多个swiper-item,连续快速切换swiper-item触发bindchange事件,小程序会出现一直无限触发bindchange事件。请检查是否在change事件中使用setData改变current值,请避免该皮没 *** 作。
扩展资料
bindchange是swiper组件的属性之一,类型为eventhandle。
current改变时会触发change事件,event.detail={current,source}。当滑块的current改变时会触发该事件并执行绑定的方法。
swiper组件是小程序中使用频次最高的组件之一,属于视图容器类组件,它通过对自身属性进行简单配置就可以实现在前端开发中要写很多代罩毕码才能完成的轮播图效果。
参考资料:微信官方文档-swiper
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)