微信小程序輪播功能

2020-1-20    前端達(dá)人

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{duration}}" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">

  <block wx:for="{{imgUrls}}" wx:key="unique">

    <swiper-item>

      <image src="{{item}}" class="img" bindtap="swipclick" />

    </swiper-item>

  </block>

</swiper>

————————————————


/* swiper {
    height: 421.5rpx;
} */
swiper-item image {
    width: 100%;
    height: 100%;
}
.swiper-container{
  width: 100%;
  position: relative;
}
.swiper-container .swiper{
  height: 300rpx;
}
.swiper-container .swiper .img{
  width: 100%;
  height: 100%;
}
————————————————


const app = getApp()
Page({
  data: {
    swiperCurrent: 0,
    indicatorDots: true,
    autoplay: true,
    interval: 3000,//自動(dòng)切換時(shí)間間隔
    duration: 800,//滑動(dòng)動(dòng)畫(huà)時(shí)長(zhǎng)
    circular: true,//是否采用銜接滑動(dòng)
    imgUrls: [
      '../../img/index/1.jpeg',
      '../../img/index/2.jpeg',
      '../../img/index/3.jpeg'
    ]
  },
  //輪播圖的切換事件
  swiperChange: function (e) {
    this.setData({
      swiperCurrent: e.detail.current
    })
    //console.log(e.detail.current);
  },
  //點(diǎn)擊指示點(diǎn)切換
  chuangEvent: function (e) {
    this.setData({
      swiperCurrent: e.currentTarget.id
    })
  },
  //點(diǎn)擊圖片觸發(fā)事件
  swipclick: function (e) {
    console.log(this.data.swiperCurrent);
    wx.switchTab({
      url: this.data.links[this.data.swiperCurrent]
    })
  },
})
————————————————



分享本文至：

日歷

鏈接

個(gè)人資料

存檔