hand 事件 efault bind 方式 itemclick 觸發 target type

屬性名	類型	默認值	說明
indicator-dots	Boolean	false	是否顯示面板指示點
autoplay	Boolean	false	是否自動切換
current	Number	0	當前所在頁面的 index
interval	Number	5000	自動切換時間間隔
duration	Number	1000	滑動動畫時長
bindchange	EventHandle		current 改變時會觸發 change 事件，event.detail = {current: current}

註意：其中只可放置<swiper-item/>組件，其他節點會被自動刪除。 swiper-item 僅可放置在<swiper/>組件中，寬高自動設置為100%。 <view class="page"> <view class="page__hd"> <text class="page__title">swiper</text> <text class="page__desc">swiper</text> </view> <view class="page__bd"> <view class="section section_gap swiper"> <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{background}}"> <swiper-item> <view class="swiper-item bc_{{item}}"></view> </swiper-item> </block> </swiper> </view> <view class="btn-area"> <button type="default" bindtap="changeIndeicatoirDots">indicator-dots</button> <button type="default" bindtap="changeVertical"> {{vertical?‘horizontal‘:‘vertical‘}}</button> <button type="default" bindtap="changeAutoplay">autoplay</button> </view> <slider bindchange="durationChange" value="{{duration}}" show-value min="500" max="2000" /> <view class="section__title">duration</view> <slider bindchange="intervalChange" value="{{interval}}" show-value min="2000" max="10000" /> <view class="section__title">interval</view> </view> </view> Page({ data:{ background:[‘green‘,‘red‘,‘yellow‘], indicatorDots:true, vertical:false, autoplay:true, interval:3000, duration:1200 }, changeIndeicatoirDots : function (e) { this.setData({ indicatorDots : !this.data.indicatorDots }) }, changeVertical : function (e) { this.setData({ vertical: !this.data.vertical }) }, changeAutoplay: function (e){ this.setData({ autoplay:!this.data.autoplay }) }, durationChange: function (e){ this.setData({ duration:e.detail.value }) }, intervalChange: function (e) { this.setData({ interval:e.detail.value }) } })

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>
 

1234567891011 註意代碼中的 data-id 和 data-name 均為自定義標簽，然後可以在綁定事件的event中通過 id 和 name 拿到。

// 輪播item點擊事件
itemclick: function(e) {
    wx.showToast({
        title: e.currentTarget.dataset.id + "",
        icon: ‘success‘,
        duration: 2000
    })
},

12345678 註意在綁定的function中可以通過event拿到對應的數據。如：e.currentTarget.dataset.id 對應wxml中的data-id 當然，還有另一種辦法。不需要綁定事件，通過在每一個的 swiper-item 外面包上一個 a 標簽，以超鏈接的方式跳轉頁面。

滑塊視圖容器   swiper