微信小程序輪播圖

微信小程序輪播圖一般用swiper組件制作,在文檔中是指：滑塊視圖容器

它的屬性如下：

 

eq:

 

wxml:

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>

wxss:

swiper {
  height: 400rpx;
  width: 100%;
}
swiper-item {
  height: 100%;
  width: 100%;
}
.slide-image{
   height: 100%;
  width: 100%;
}

wxjs:

 data: {
    current: 0,  //當前所在頁面的 index

    indicatorDots: true, //是否顯示面板指示點

    autoplay: true, //是否自動切換

    interval: 3000, //自動切換時間間隔

    duration: 800, //滑動動畫時長

    circular: true, //是否采用銜接滑動

    imgUrls: [

      'http://1027145.user-website5.com/yizhan/images-2/banner1.jpg',

      'http://1027145.user-website5.com/yizhan/images-2/banner2.jpg',

      'http://1027145.user-website5.com/yizhan/images-2/banner3.jpg'

    ],

    links: [

      '/pages/second/register',

      '/pages/second/register',

      '/pages/second/register'

    ]



  },

  //輪播圖的切換事件

  swiperChange: function(e) {

    this.setData({

      swiperCurrent: e.detail.current

    })

  },

  //點擊指示點切換

  chuangEvent: function(e) {

    this.setData({

      swiperCurrent: e.currentTarget.id

    })

  },

  //點擊圖片觸發事件

  swipclick: function(e) {

    console.log(this.data.swiperCurrent);

    wx.switchTab({

      url: this.data.links[this.data.swiperCurrent]

    })

  }