uni-app swiper数量过多时卡顿优化方案，微信小程序s

问题：

swiper数量达到大约400+时候会出现明显滑动卡顿，渲染慢的问题，达到1000+时候需要几十秒时间，或者可能导致渲染失败。

解决方案：

配置circular="true"属性开启衔接滑动，即播放到末尾后重新回到开头。然后固定用于展示的swiper-item只设置3个，当滑动时候去替换展示的数据。这种方法可以展示几千万的数据展示都没问题。

//页面源码

<template>
  <view class="content">
    <view class="title">{{originIndex +1 }}/{{ originList.length }}</view>
    <swiper class="swiper" circular @change="swiperChange" swiperDuration="250">
      <swiper-item v-for="(item, index) in displaySwiperList" :key="index">
        <view class="wrap_content">{{ item }} </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      originList: [], // 源数据
      displaySwiperList: [], // swiper需要的数据
      displayIndex: 0, // 用于显示swiper的真正的下标数值只有：0，1，2。
      originIndex: 0, // 记录源数据的下标
    };
  },
  methods: {
    /**
     * 初始一个显示的swiper数据
     * @originIndex  从源数据的哪个开始显示默认0，如从其他页面跳转进来，要显示第n个，这个参数就是他的下标
     */
    initSwiperData(originIndex = this.originIndex) {
      const originListLength = this.originList.length; // 源数据长度
      const displayList = [];
      displayList[this.displayIndex] = this.originList[originIndex];
      displayList[this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1] =
        this.originList[
          originIndex - 1 == -1 ? originListLength - 1 : originIndex - 1
        ];
      displayList[this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1] =
        this.originList[
          originIndex + 1 == originListLength ? 0 : originIndex + 1
        ];
      this.displaySwiperList = displayList;
    },
    /**
     * swiper滑动时候
     */
    swiperChange(event) {
      const { current } = event.detail;
      const originListLength = this.originList.length; // 源数据长度
      // =============向后==========
      if (this.displayIndex - current == 2 || this.displayIndex - current == -1) {
        this.originIndex =
          this.originIndex + 1 == originListLength ? 0 : this.originIndex + 1;
        this.displayIndex = this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1;
        this.initSwiperData(this.originIndex);
      }
      // ======如果两者的差为-2或者1则是向前滑动============
      else if (this.displayIndex - current == -2 || this.displayIndex - current == 1) {
        this.originIndex = this.originIndex - 1 == -1 ? originListLength - 1 : this.originIndex - 1;
        this.displayIndex = this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1;
        this.initSwiperData(this.originIndex);
      }
    },
  },
  created() {
    for (let i = 1; i <= 1300; i++) {
      this.originList.push(i);
    }
    this.initSwiperData();
  },
};
</script>

<style>
.title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60rpx;
}
.swiper {
  height: calc(100vh - 120rpx);
}
.wrap_content {
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
  height: 100vh;
  color: aqua;
  font-size: 80px;
  margin: 0rpx 40rpx;
}
</style>

注意：

1、swiper-item的key一定要设置，并且用index。

<swiper-item v-for="(item, index) in displaySwiperList" :key="index">
        <view class="wrap_content">{{ item }} </view>
</swiper-item>

2、如果只有一张情况，不想让它来回滚动。可以设置circular，但是circular无法直接动态设置，我们可以使用computed来设置

<template>
  <swiper :circular="!canCircular" >  </swiper>
</template>

export default {
  data() {
    return {
      originList:[]
    }  
  },
  computed: {
    canCircular() {
      return this.originList.length > 0;   // 看这里重点
    }
  }
}

gitlab地址：

https://gitee.com/xiaoguoyao/uni-app