vue前台（四点二）

一，处理swiper轮播图

在floor组件中，

轮播图html模板

<!-- <div class="swiper-container" ref="floor1Swiper">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="(carousel, index) in floor.carouselList" :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> -->

js代码

 // watch: {
  //   floor: {
  //     handler() {
  //       //Vue.nextTick或者vm.$nextTick是一样的功能
  //       //在最近的一次dom更新之后执行nextTick里面传的回调函数
  //       this.$nextTick(() => {
  //         new Swiper(this.$refs.floor1Swiper, {
  //           // direction: "vertical", // 垂直切换选项
  //           // autoplay:true,//等同于以下设置
  //           loop: true, // 循环模式选项

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

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

  //           // 如果需要滚动条
  //           // scrollbar: {
  //           //   el: ".swiper-scrollbar"
  //           // }
  //         });
  //       });
  //     },
  //     immediate:true //立即执行，在最近dom更新之前就会执行
  //   },
  // }

对于floor和listContainer组件都有轮播图，此时可以将swiper轮播图封装成一个轮播图公共组件

二，抽取公共的轮播swiper组件

1.在compoents文件夹中，新建sliderLoop文件夹- --index.vue

<template>
  <div class="swiper-container" ref="banner">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(banner, index) in bannerList" :key="banner.id">
        <img :src="banner.imgUrl" />
      </div>
    </div>
    <div class="swiper-pagination"></div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
export default {
  name: "SliderLoop",
  props:['bannerList'],
  watch: {
    bannerList: {
      handler() {
        //Vue.nextTick或者vm.$nextTick是一样的功能
        //在最近的一次dom更新之后执行nextTick里面传的回调函数
        this.$nextTick(() => {
          new Swiper(this.$refs.banner, {
            // direction: "vertical", // 垂直切换选项
            // autoplay:true,//等同于以下设置
            loop: true, // 循环模式选项

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

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

            // 如果需要滚动条
            // scrollbar: {
            //   el: ".swiper-scrollbar"
            // }
          });
        });
      },
      immediate: true //立即执行，在最近dom更新之前就会执行
    }
  }
};
</script>

<style lang="less" scoped>
</style>

2.在入口文件main.js全局注册， Vue.component('SliderLoop',SliderLoop)

3.在floor和listContainer组件,实例化轮播图组件

  <div class="center">
        <!--banner轮播-->
        <SliderLoop :bannerList="bannerList"></SliderLoop>
        <!-- <div class="swiper-container" ref="banner">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(banner, index) in bannerList" :key="banner.id">
              <img :src="banner.imgUrl" />
            </div>
            
          </div>
          <div class="swiper-pagination"></div>

          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div> -->
      </div>

注；父子组件通信，属性传递，:bannerList="bannerList"

<div class="floorBanner">
              <SliderLoop :bannerList="floor.carouselList"></SliderLoop>
              <!-- <div class="swiper-container" ref="floor1Swiper">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="(carousel, index) in floor.carouselList" :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> -->
            </div>

注：父子组件通信