uniapp swiper 组件大数据优化_uniapp小程序端 swiper性能优化

这是我目前使用的方式，首页视频流无限滚动时用到的，不影响预加载，用起来很流畅
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;   // 看这里重点
    }
  }
}