查看: 608|回复: 5

swiper 数据更改 会卡顿问题

[复制链接]

该用户从未签到

1

主题

5

帖子

9

积分

新手上路

Rank: 1

积分
9
发表于 2021-9-15 21:05:24 | 显示全部楼层 |阅读模式
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>


回复

使用道具 举报

该用户从未签到

1

主题

5

帖子

9

积分

新手上路

Rank: 1

积分
9
 楼主| 发表于 2021-9-15 21:06:43 | 显示全部楼层
主要这个数据改变就会卡顿 <div>{{current_index}}</div>
回复 支持 反对

使用道具 举报

该用户从未签到

1

主题

5

帖子

9

积分

新手上路

Rank: 1

积分
9
 楼主| 发表于 2021-9-16 09:24:24 | 显示全部楼层
请问有会的吗?怎样解决
回复 支持 反对

使用道具 举报

该用户从未签到

1

主题

5

帖子

9

积分

新手上路

Rank: 1

积分
9
 楼主| 发表于 2021-9-16 21:12:42 | 显示全部楼层
用js实现了
回复 支持 反对

使用道具 举报

该用户从未签到

1

主题

5

帖子

9

积分

新手上路

Rank: 1

积分
9
 楼主| 发表于 2021-9-16 21:13:23 | 显示全部楼层
document.getElementById("setIdex").innerHTML=that.current_idnex+"/"+that.resultitems.length;
回复 支持 反对

使用道具 举报

该用户从未签到

1

主题

3

帖子

11

积分

新手上路

Rank: 1

积分
11
发表于 2021-9-23 15:40:03 | 显示全部楼层
哈哈哈太强了。 没人回复的问题。 就自己解决太帅了。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

GMT+8, 2022-1-26 21:59 , Processed in 0.066379 second(s), 27 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表