小程序代码片段

轮播图

cs:
   <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>

js:
    const app = getApp()
    Page({
      data: {
        swiperCurrent: 0,
        indicatorDots: true,
        autoplay: true,
        interval: 3000,//自动切换时间间隔
        duration: 800,//滑动动画时长
        circular: true,//是否采用衔接滑动
        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);
      },
      //点击指示点切换
      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]
        })
      },
    })

style:
           /* 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%;
        }