feifeidao 发表于 2021-9-15 21:05:24

swiper 数据更改 会卡顿问题

swiper 版本"swiper": "^5.4.5",
vue-awesom-swiper 版本 "vue-awesome-swiper": "^4.1.1",


滑动时改变下标在页面从新渲染会停顿3-4秒

<template>
<div>
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide class="swiper-slide" v-for="(item,index) in resultitems" :key="index">

      <div style="width: 100%;height: 500px;">aa</div>

      <div>{{current_index}}</div>
      </swiper-slide>
    </swiper>



</div>
</template>

<script>
import {Swiper, SwiperSlide} from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
name: "TestSwiper.vue",
data() {
    let that=this;
    return {
      resultitems: [],
      current_index:0,
      swiperOption: {
      longSwipesRatio: 0.1,
      disableOnInteraction: false,
      loop: false,
      autoplayDisableOnInteraction: false,
      // 如果需要分页器
      pagination: '.swiper-pagination',
      // 如果需要前进后退按钮
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      // 如果需要滚动条
      scrollbar: '.swiper-scrollbar',
      swipeToNext: false,
      swipeToPrev: false,
      navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
      },
      observer: false,
      observeParents: false,
      runCallbacksOnInit: false,
      on: {
          slideChangeTransitionStart: function () {
            // let index=this.activeIndex;
            // that.setIndex();
            that.current_index=this.realIndex;

          },
      }
      },
    }
},
components: {
    Swiper,
    SwiperSlide
},
computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
},
created() {

    for (let i = 0; i < 100; i++) {
      this.resultitems = i;
    }
}
}
</script>


feifeidao 发表于 2021-9-15 21:06:43

主要这个数据改变就会卡顿 <div>{{current_index}}</div>

feifeidao 发表于 2021-9-16 09:24:24

请问有会的吗？怎样解决

feifeidao 发表于 2021-9-16 21:12:42

用js实现了

feifeidao 发表于 2021-9-16 21:13:23

document.getElementById("setIdex").innerHTML=that.current_idnex+"/"+that.resultitems.length;

sakura3012 发表于 2021-9-23 15:40:03

哈哈哈太强了。 没人回复的问题。 就自己解决太帅了。
页: [1]
查看完整版本: swiper 数据更改 会卡顿问题