微信小程式開髮指南：關於輪播

應用程式中最常見的應該就是輪圖了，本文講輪播的實現，部分內容來自官方文檔，增加了筆者實際操作中的一些問題與經驗。
本文基於微信小程式公測版，IDE：微信開發者工具0.10.102800

元件 swiper

當不設定 vertical 屬性，或vertical=”false” 時，指示點在元件下部，圖片輪播從左到右，效果如下：

當設定vertical=”true” 時，指示點在元件右部，圖片輪播從下至上，效果如下：

注意: swiper是一個容器類別視圖，但是其中只能放置元件，如放置其他節點，會自動刪除。

swiper-item

程式碼如下：

<!--main.wxml-->
<view>
    <swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
            autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
        <block wx:for="{{images}}">
            <swiper-item>
                <image src="{{item.picurl}}" class="slide-image"/>
            </swiper-item>
        </block>
    </swiper>
</view>

//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拿到。

<!--main.wxml-->
<view>
    <swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
            autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
        <block wx:for="{{images}}">
            <swiper-item bindtap="itemclick" data-id="{{item.id}}" data-name="{{item.name}}">
                <image src="{{item.picurl}}" class="slide-image"/>
            </swiper-item>
        </block>
    </swiper>
</view>

// 轮播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中文網！