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

在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>

 

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

晓鹏boy

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值