首页 > PHP资讯 > 工具库 > 微信小程序开发指南:关于轮播

微信小程序开发指南:关于轮播

工具库
应用中最常见的应该就是轮图了,本文讲轮播的实现,部分内容来源于官方文档,增加了笔者实际操作中的一些问题与经验。
本文基于微信小程序公测版,IDE:微信开发者工具 0.10.102800

组件 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中文网!

工具库

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持20不支持0