vue-swiper的使用
文章 2672 0 0 0
发布时间:2018年11月15日

概述

vue-awesome-swiper官网链接https://www.npmjs.com/package/vue-awesome-swiper
和上一篇随笔一样,我们先下载包,然后去main.js里面配置。

npm install vue-awesome-swiper —save

我们可以用import的方法

// import
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

也可以用require

var Vue = require('vue')
var VueAwesomeSwiper = require('vue-awesome-swiper')

两者都可以达到目的,然后再mian.js里面全局注册

Vue.use(VueAwesomeSwiper)

在模板里使用

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
    components: {
        swiper,
        swiperSlide
    }
}
<template>
    <swiper :options="swiperOption" ref="mySwiper">
        <!— slides —>
        <swiper-slide>I'm Slide 1</swiper-slide>
        <swiper-slide>I'm Slide 2</swiper-slide>
        <swiper-slide>I'm Slide 3</swiper-slide>
        <swiper-slide>I'm Slide 4</swiper-slide>
        <swiper-slide>I'm Slide 5</swiper-slide>
        <swiper-slide>I'm Slide 6</swiper-slide>
        <swiper-slide>I'm Slide 7</swiper-slide>
        <!— Optional controls —>
        <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 class="swiper-scrollbar" slot="scrollbar"></div>
    </swiper>
</template>
<script>
// swiper options example:
export default {
    name: 'carrousel',
    data() {
        return {
            swiperOption: {//以下配置不懂的,可以去swiper官网看api,链接http://www.swiper.com.cn/api/
                // notNextTick是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,
                也就意味着你可以在第一时间获取到swiper对象,
                假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true
                notNextTick: true,
                // swiper configs 所有的配置同swiper官方api配置
                autoplay: 3000,
                direction : 'vertical',
                grabCursor : true,
                setWrapperSize :true,
                autoHeight: true,
                pagination : '.swiper-pagination',
                paginationClickable :true,
                prevButton:'.swiper-button-prev',//上一张
                nextButton:'.swiper-button-next',//下一张
                scrollbar:'.swiper-scrollbar',//滚动条
                mousewheelControl : true,
                observeParents:true,
                // 如果自行设计了插件,那么插件的一些配置相关参数,也应该出现在这个对象中,如下debugger
                debugger: true,
            }
        }
    },
}
</script>

npm包发布者的原话是

// starting with version 2.6.0, you need to manually introduce swiper’s css这句话的意思是:从版本2.6.0开始,您需要手动引入swiper的css

import 'swiper/dist/css/swiper.css'

评论专区
Q群
Q群
Q群
反馈
纠错