nuxt.js安装vue-awesome-swiper

责编:menVScode 2018-10-12 14:22 阅读(515)

本人当前项目的nuxt版本是2.0.0。

1、安装 vue-awesome-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 文件中写入

 /*
  ** Global CSS
  */
  css: [
    { src: "swiper/dist/css/swiper.css" }
  ],
 /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    { src: "~/plugins/swiper.js", ssr: false }
  ],

4、vue组件部分

<div class="swiper swiperBox" v-swiper:swiper="swiperOption" ref="swiperBox" @mouseenter="stopSwiper" @mouseleave="startSwiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(banner,i) in banners" :key="i">
            <img :src="banner">
        </div>
    </div>
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>  
</div>

5、js部分:swiper官方文档--https://www.swiper.com.cn/api/

export default {
    data(){
        return {
            banners: [ '//cdn.cnbj0.fds.api.mi-img.com/b2c-bbs-cms/2018/0929/20180929071037605.jpg', '//cdn.cnbj0.fds.api.mi-img.com/b2c-bbs-cms/2018/0929/20180929071037605.jpg', '//cdn.cnbj0.fds.api.mi-img.com/b2c-bbs-cms/2018/0929/20180929071037605.jpg','//cdn.cnbj0.fds.api.mi-img.com/b2c-bbs-cms/2018/0929/20180929071037605.jpg'],
            // 所有配置均为可选(同Swiper配置)  
            swiperOption: {
                loop: true,
                speed:500,
                // notNextTick是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true
                notNextTick: true,
                slidesPerView: 'auto',
                centeredSlides: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                on: {
                    slideChange() {
                    // console.log('onSlideChangeEnd', this);
                    },
                    tap() {
                    // console.log('onTap', this);
                    }
                },
                autoplay: {
                    delay: 3500,
                    disableOnInteraction: false,
                },
                autoplayDisableOnInteraction:false,
                // effect:'cube',
                mousewheel: true,
                preloadImages: false,
                lazy: true
            }
        }
    },
    swiper() {
        // 如果你需要得到当前的swiper对象来做一些事情,你可以像下面这样定义一个方法属性来获取当前的swiper对象,同时notNextTick必须为true
        return this.$refs.swiperBox.swiper
    },
    methods:{
        stopSwiper(){
            this.swiper.autoplay.stop()
        },
        startSwiper(){
            this.swiper.autoplay.start()
        }
    }
}
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码