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

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

组件 swiper

当不设置 vertical 属性，或者 vertical=”false” 时，指示点在组件下部，图片轮播从左至右，效果如下：

当设置 vertical=”true” 时，指示点在组件右部，图片轮播从下至上，效果如下：

注意: swiper是一个容器类视图，但是其中只能放置组件，如放置其他节点，会被自动删除。

swiper-item

iWebShop开源商城系统

iWebShop是一款基于PHP语言及MYSQL数据库开发的B2B2C多用户开源免费的商城系统，系统支持自营和多商家入驻、集成微信商城、手机商城、移动端APP商城、三级分销、视频电商直播、微信小程序等于一体，它可以承载大数据量且性能优良，还可以跨平台，界面美观功能丰富是电商建站首选源码。iWebShop开源商城系统 v5.14 更新日志：新增商品编辑页面规格图片上传优化商品详情页面规格图片与主图切

下载

代码如下：

//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中文网！