基于Vue的移动端通用外卖项目---难点1: 数据从服务器端获取成功并显示在页面上后，swiper效果失效

本文链接：https://blog.csdn.net/m0_59183852/article/details/127747366

我最近在做一个用Vue来做的移动端外卖项目，我在成功获取服务器端的数据并将它们呈现在页面上之后，原本在静态页面的时候可以生效的swiper滑动轮播效果失效了，怎么滑也滑不到下一页。

最初的代码是像下面这样写的，当页面挂载后获取分类列表并实现滑动轮播的效果。

<template>
	<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(categorys, index) in categorysArr" :key="index">
        <a href="javascript:" class="link_to_food" v-for="(category, index) in categorys" :key="index">
          <div class="food_container">
            <img :src="baseImageUrl + category.image_url" />
          </div>
          <span>{{ category.title }}</span>
        </a>
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
</template>
<script>
  import Swiper from 'swiper'
  import "swiper/dist/css/swiper.min.css"
	import "swiper/dist/js/swiper.min.js"
  export default {
    name: '',
    data(){
      return {
        baseImageUrl: 'https://foodscategory.com'
      }
    }
    mounted: {
      this.$store.dispatch('getCategorys')
      //创建一个Swiper实例对象来实现滑动轮播
      new Swiper('.swiper-container', {
        loop: true,
        pagination: {
          el: '.swiper-pagination'
        }
      })
    },
    computed: {
      ...mapState(["address", "categorys"]),
        /* 将从后台获取到的categorys数据拆分成一个二维数组 */
        categorysArr() {
          const { categorys } = this;
          const arr = [];
          let minArr = [];
          categorys.forEach((c) => {
            if (minArr.length === 8) {
              minArr = [];
            }
            if (minArr.length === 0) {
              arr.push(minArr);
            }
            minArr.push(c);
          });
          return arr;
        },
    }
  }
</script>

解决思路1: setTimeout异步执行。
解决思路2: $nextTick

$nextTick是Vue生命周期钩子中的一个。将回调延迟到下次 DOM 更新循环之后执行。我们在修改数据之后会立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

<script>
  import Swiper from 'swiper'
  import "swiper/dist/css/swiper.min.css"
	import "swiper/dist/js/swiper.min.js"
  export default {
    name: '',
    data(){
      return {
        baseImageUrl: 'https://foodscategory.com'
      }
    }
    mounted: {
      this.$store.dispatch('getCategorys')
    },
    computed: {
      ...mapState(["address", "categorys"]),
        /* 将从后台获取到的categorys数据拆分成一个二维数组 */
        categorysArr() {
          const { categorys } = this;
          const arr = [];
          let minArr = [];
          categorys.forEach((c) => {
            if (minArr.length === 8) {
              minArr = [];
            }
            if (minArr.length === 0) {
              arr.push(minArr);
            }
            minArr.push(c);
          });
          return arr;
        },
    }
    watch: {
      categorys() {
        //categorys数组中有数据了，在异步更新界面之前执行
        //使用settimeout可以实现效果，但是不太好
        // setTimeout(() => {
        //   new Swiper(".swiper-container", {
        //     loop: true,
        //     pagination: {
        //       el: ".swiper-pagination",
        //     },
        //   });
        // }, 1);
        this.$nextTick(() => { //一旦完成界面更新，立即调用（此条语句写在数据更新之后）
          //创建一个Swiper实例对象来实现滑动轮播
          new Swiper(".swiper-container", {
            loop: true,
            pagination: {
              el: ".swiper-pagination",
            },
          });
        });
      },
    }
  }
</script>