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>
注:父子组件通信