nuxt使用swiper，nuxt一个页面使用两个swiper，nuxt关联两个swiper

最新推荐文章于 2024-08-26 10:22:24 发布

习惯是一种病

最新推荐文章于 2024-08-26 10:22:24 发布

阅读量1.2k

点赞数

分类专栏： vue nuxt 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_37568942/article/details/104571448

版权

vue 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

nuxt

1 篇文章 0 订阅

订阅专栏

1.安装swiper

npm install vue-awesome-swiper --save

2.在plugins下新建vue-swiper.js文件

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)

3.在nuxt.config.js中引入

       css: [
          "swiper/dist/css/swiper.css"
        ],        
       plugins: [
           { src: "@/plugins/vue-swiper.js", ssr: false },
       ],

4. html部分

        <!--v-swiper:mySwiper 对应名字不同即可，mySwiper就是实例，可以直接this.mySwiper获取-->
        <div v-swiper:mySwiper="swiperOption" >
            <div class="swiper-wrapper">
               <div class="swiper-slide" v-for="banner in imglist">
                  <img :src="banner" class="swiper-img" @click="bigImg(banner)">
               </div>
            </div>
        </div>
        <div class="swiper-pagination swiper-pagination-bullets"></div>
        <div class="big-img" @click="closeBigImg">
            <div v-swiper:mySwiper2="swiperOption2" >
                <div class="swiper-wrapper">
                    <div class="swiper-slide swiper-slide-2" v-for="banner in imglist">
                       <img :src="banner" class="swiper-img-2">
                    </div>
                </div>

            </div>
        </div>

5. js实例及关联两个swiper

data () {
    return {
        banners: [],//图片集合
        swiperOption: {
            loop: true,
            /*slidesPerView: 'auto',*/
            centeredSlides: true,
            spaceBetween: 30,
            pagination: {
                el: '.swiper-pagination',
                type: 'fraction',
            },
            /*autoplay: {
                disableOnInteraction: false,  // 用户操作swiper之后，是否禁止autoplay
                delay: 3000, // 自动切换的时间间隔（单位ms）
            },*/
        },
        swiperOption2: {
            loop: true,
            centeredSlides: true,
            spaceBetween: 30,
        }
    }
},

mounted() {
    this.mySwiper.controller.control = this.mySwiper2; //Swiper1控制Swiper2
    this.mySwiper2.controller.control = this.mySwiper; //Swiper2控制Swiper1
},