滑块视图容器   swiper

Posted 2020-10-03 taiyang2014

属性名	类型	默认值	说明
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 标签，以超链接的方式跳转页面。