小程序swiper轮播图跳转,返回时变成第一页

背景

小程序里面经常有轮播图功能,有的还可以跳转内页.我一般使用小程序内置组件swiper实现这功能.如果想实现轮播图跳转其中内页,返回时变成第一页.

实现思路

通过swiper属性和方法实现

实现代码

  <swiper class="rotation" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}"
    duration="{{duration}}" current="{{swiperCurrent}}" bindchange="swiperChange">
    <block wx:for="{{backgroundImage}}" wx:key="item.id">
      <swiper-item style="width: 100vw;" bindtap="itemClick" data-item="{{item}}">
        <image src="{{item.url}}" mode="scaleToFill" class="image"></image>
      </swiper-item>
    </block>
  </swiper>

  data: {
    swiperCurrent: 0, //当前所在滑块的index
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 2000,
    duration: 500,
  },
onShow: function () { //初始化 重新赋值
    this.setData({
      swiperCurrent: 0
    })
  },
  swiperChange(e) { // swiper页面变化
    this.setData({
      swiperCurrent: e.detail.current
    })
  },
  itemClick(e) {  // 点击跳转内页
    console.log('e', e.currentTarget.dataset.item)
    const {
      path
    } = e.currentTarget.dataset.item
    wx.navigateTo({
      url: path,
    })
  },

效果图

滑动后点击

内页返回后,已回到第一页

注意:如果不想返回首页,那么取消show方法里面的 swiperCurrent的重新赋值就好了;