Swiper中文论坛

标题: swiper 数据更改 会卡顿问题 [打印本页]

---

作者: feifeidao    时间: 2021-9-15 21:05
标题: swiper 数据更改 会卡顿问题
swiper 版本  "swiper": "^5.4.5",
[size=13.0667px]vue-awesom-swiper 版本 "vue-awesome-swiper": "^4.1.1",


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

<template>
  <div>
    <swiper ptions="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
主要这个数据改变就会卡顿 <div>{{current_index}}</div>

---

作者: feifeidao    时间: 2021-9-16 09:24
请问有会的吗？怎样解决

---

作者: feifeidao    时间: 2021-9-16 21:12
用js实现了

---

作者: feifeidao    时间: 2021-9-16 21:13
document.getElementById("setIdex").innerHTML=that.current_idnex+"/"+that.resultitems.length;

---

作者: sakura3012    时间: 2021-9-23 15:40
哈哈哈太强了。 没人回复的问题。 就自己解决太帅了。

---

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)

Powered by Discuz! X3.2