naxtTick获取服务器数据

在vue中可以使用swiper插件，首先在项目中下载swiper

cnpm install --save swiper@5

我用的是swiper5版本的插件

<script>
//引入 swiper js文件
import Swiper from "swiper";
//引入 seiper css文件
import "swiper/css/swiper.css"
</script>

使用

在组件中应用，根据具体情况自行配置，具体参考swiper官方文档

        <!--banner轮播-->
        <div class="swiper-container" id="mySwiper">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
//遍历bannerList里面数据
              v-for="(carousel, index) in bannerList"
              :key="carousel.id"
            >
              <!-- 动态绑定 要有冒号 -->
              <img :src="carousel.imgUrl" />
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>

参考swiper官网的HTML内容,如图 

轮播图结构有了，才能new seiper实例

  watch: {
    //监听 bannerList函数 等服务器传值 数据变化
    bannerList: {
      //handler事件处理 对象写法必须要有handler 可以监听到bannerList属性值的变化
      //v-for执行完毕之后 才能有结构
      handler(newValue, oldValue) {
        //naxtTick: 在下次DOM更新（服务器数据已经传过来） 循环结束(v-for)之后执行延迟回调(结构已经有了)，
        //在修改数据之后立即使用这个方法，获取更新后的DOM
        this.$nextTick(() => {
          //作用：保证服务器数据都有了 保证页面中的结构一定是有的
          //当执行这个回调的时候，保证服务器数据回来了，v-for执行完毕了 （轮播图结构一定有了）
          //轮播图结构有了，才能new swiper实例
          var mySwiper = new Swiper(
            document.querySelector(".swiper-container"),
            {
              loop: true, // 循环模式选项

              // 如果需要分页器
              pagination: {
                el: ".swiper-pagination",
              },

              // 如果需要前进后退按钮
              navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
              },
            }
          );
        });
      },
    },
  },