vue 中swiper分页或者滑动失效的问题

最新推荐文章于 2024-07-15 18:43:38 发布

小皮皮不皮

最新推荐文章于 2024-07-15 18:43:38 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue的一些使用技巧

本文链接：https://blog.youkuaiyun.com/fengxiaopeng74/article/details/108536275

vue的一些使用技巧专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍了在Vue项目中使用Swiper组件遇到的数据加载延迟导致的滑动失效问题，并提供了解决方案。通过在数据加载完成后再初始化Swiper，确保了滑动效果的正常实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue 中使用swiper正常情况下没有问题，但是当我们请求数据时间比较长，然后请求后在加载swiper就会发现滑动失效，或者需要展示的分页有问题，解决如下

<template>
  <div class="main bg trafficJam">
    <div class="swiper-container personListMain">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(each, num) in personList" :key="num">
          <div class="swiperCon" v-for="(item, index) in each" :key="index">
            <div>{{item.dutyType}}</div>
            <div>{{item.dutyName}}</div>
            <div>{{item.dutyNumber}}</div>
          </div>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.css";
export default {
  data() {
    return {
        personList: [
        [
          {
            dutyType: "一大队值班领导",
            name: "孙文军",
            tel: "63055883"
          },
          {
            dutyType: "二大队110值班人员",
            dutyName: "张二",
            dutyNumber: "146778883322"
          }
        ],
        [
          {
            dutyType: "一大队值班领导",
            dutyName: "孙文军",
            dutyNumber: "63055883"
          },
          {
            dutyType: "二大队110值班人员",
            dutyName: "张二",
            dutyNumber: "146778883322"
          }
        ],
        [
          {
            dutyType: "一大队值班领导",
            dutyName: "孙文军",
            dutyNumber: "63055883"
          },
          {
            dutyType: "二大队110值班人员",
            dutyName: "张二",
            dutyNumber: "146778883322"
          }
        ]
      ],
    };
  },
  created() {
    this.getDutyList();
  },
  mounted() {
    let a = new Swiper(".swiper-container", {
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true //修改swiper的父元素时，自动初始化swiper
    });
  },
  methods: {
    autoSwiper() {
      let a = new Swiper(".swiper-container", {
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        speed: 1000, // 滚动时长
        autoplay: 5000, // 停留时长
        loop: true, // 如果需要分页器
        pagination: ".swiper-pagination",
        paginationClickable: true
      });
    },
    //获取值班信息列表
   getDutyList() { 
      try {
        let resData = await dutyService.getDutyList();
        console.log("值班信息列表", resData);
        //分页列表
        for (var i = 3; i < resData.length; i += 2) {
          this.personList.push(resData.slice(i, i + 2));
        }
        if (this.personList.length) {
          this.autoSwiper();
        }
        console.log(this.personList);
      } catch (err) {
        console.log("获取数据失败", err);
      }
    }
  }
};
</script>
<style scoped>
@import url("../../../assets/css/index.css");

.swiper-container {
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 5%;
}
.swiper-slide {
  width: 100%;
  height: 90%;
  position: relative;
  padding-bottom: 0.5rem;
}
</style>