最近開(kāi)發(fā)的一個(gè)小程序中涉及一個(gè)答題頁(yè)面，打算使用小程序的swiper組件開(kāi)發(fā)，題目可能數(shù)量過(guò)多，使用swiper一次性加載會(huì)造成卡頓，于是進(jìn)行了一些優(yōu)化

解決思路：頁(yè)面只展示3個(gè)swiper-item組件（小程序視頻輪播插件受到的啟發(fā)），每次輪播變化，都截取總數(shù)據(jù)里面的3條進(jìn)行展示

觀察規(guī)律：畫(huà)了個(gè)簡(jiǎn)單草圖，大家可以看下，每次輪播索引變化后，計(jì)算出當(dāng)前索引、前一個(gè)索引值、后一個(gè)索引值，以及分別對(duì)應(yīng)到數(shù)據(jù)列表上的索引和值

代碼實(shí)現(xiàn)

<template>
  <view class="index-box">
    <swiper class="swipe" :circular="circular" :current="swipeActiveIndex" @change="swipeChange">
      <swiper-item v-for="(item, index) in swipeList" :key="index">
        <view class="swipe-item">{{ item }}</view>
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
export default {
  data() {
    return {
      circular: true, // 是否可以循環(huán)滾動(dòng)
      swipeActiveIndex: 0, // 當(dāng)前輪播圖激活索引
      currentIndex: 0, // 當(dāng)前展示數(shù)據(jù)在列表中的索引值
      swipeLength: 3, // 總的輪播圖數(shù)量
      dataList: [1, 2, 3, 4, 5, 6, 7] // 數(shù)據(jù)列表
    }
  },
  computed: {
    swipeList() {
      // 獲取當(dāng)前值、下一個(gè)值、上一個(gè)值
      let currentValue = this.dataList[this.currentIndex]
      let nextValue = this.dataList[this.getDataIndex(this.currentIndex + 1)]
      let prevValue = this.dataList[this.getDataIndex(this.currentIndex - 1)]

      // 獲取當(dāng)前輪播索引對(duì)應(yīng)的值、下個(gè)索引對(duì)應(yīng)的值、上個(gè)索引對(duì)應(yīng)的值
      let list = new Array(3)
      list[this.swipeActiveIndex] = currentValue
      list[this.getSwipeIndex(this.swipeActiveIndex + 1)] = nextValue
      list[this.getSwipeIndex(this.swipeActiveIndex - 1)] = prevValue
      return list
    }
  },
  methods: {
    swipeChange(event) {
      let current = Number(event.detail.current)
      if ([1, 1 - this.swipeLength].includes(current - this.swipeActiveIndex)) {
      	// 向左滑動(dòng)
        this.currentIndex = this.getDataIndex(this.currentIndex + 1)
      } else {
      	// 向右滑動(dòng)
        this.currentIndex = this.getDataIndex(this.currentIndex - 1)
      }
      this.swipeActiveIndex = current
    },
    // 獲取當(dāng)前數(shù)據(jù)列表的索引
    getDataIndex(index) {
      if (index < 0) {
        // 小于零，返回?cái)?shù)據(jù)列表末尾索引
        return this.dataList.length - 1
      } else if (index >= this.dataList.length) {
        // 等于（或大于，一般不會(huì)）數(shù)據(jù)列表長(zhǎng)度，返回?cái)?shù)據(jù)首位索引
        return 0
      } else {
        return index
      }
    },
    getSwipeIndex(index) {
      if (index < 0) {
        return this.swipeLength - 1
      } else if (index >= this.swipeLength) {
        return 0
      } else {
        return index
      }
    }
  }
}
</script>
<style scoped lang="scss">
.index-box {
  width: 100%;

  .swipe {
    width: 100%;
    height: 300rpx;

    &-item {
      display: flex;
      width: 100%;
      height: 100%;
      font-size: 80rpx;
      color: #fff;
      background: #222;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>