组件 swiper
注意: swiper是一个容器类视图,但是其中只能放置组件,如放置其他节点,会被自动删除。
swiper-item
代码如下:
//main.js//获取应用实例var app = getApp()Page({ data: { indicatorDots: true, vertical: true, autoplay: true, interval: 3000, duration: 1000, loadingHidden: false // loading }, //事件处理函数 swiperchange: function(e) { // 此处写 轮播 改变时会触发的 change 事件 }, onLoad: function() { console.log('onLoad') var that = this //sliderList wx.request({ url: 'http://huanqiuxiaozhen.com/wemall/slider/list', method: 'GET', data: {}, header: { 'Accept': 'application/json' }, success: function(res) { that.setData({ images: res.data }) } }) }})
item单击事件
在 swiper-item 上绑定事件,通过 data 自定义标签绑定数据。然后在function中通过event拿到。
// 轮播item点击事件itemclick: function(e) { wx.showToast({ title: e.currentTarget.dataset.id + "", icon: 'success', duration: 2000 })},
注意在绑定的function中可以通过event拿到对应的数据。如:e.currentTarget.dataset.id 对应wxml中的data-id
当然,还有另一种办法。不需要绑定事件,通过在每一个的 swiper-item 外面包上一个 a 标签,以超链接的方式跳转页面。
更多微信小程序开发指南:关于轮播相关文章请关注PHP中文网!