vue使用vue-awesome-swiper及一些问题

vue

vue-awesome-swiper是基于swiper的一个轮播图插件,使用非常方便。

首先安装下

 npm install vue-awesome-swiper --save

然后在入口文件main.js引入下

import VueAwesomeSwiper from 'vue-awesome-swiper'

import './static/css/swiper.min.css'

Vue.use(VueAwesomeSwiper)

最后运用到组件中

<template>

<div class="scroll">

<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>

<!-- Optional controls -->

<div class="swiper-pagination " slot="pagination"></div>

<div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>

<div class="swiper-button-next swiper-button-black" slot="button-next"></div>

<!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->

</swiper>

</div>

</template>

<script>

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

export default {

name: 'HelloWorld',

components: {

swiper,

swiperSlide

},

data () {

return {

swiperOption: {

notNextTick: true,

//循环

loop:true,

//设定初始化时slide的索引

initialSlide:0,

//自动播放

autoplay:true,

// autoplay: {

// delay: 3000,

// stopOnLastSlide: false,

// disableOnInteraction: true,

// },

// 设置轮播

effect : 'flip',

//滑动速度

speed:800,

//滑动方向

direction : 'horizontal',

//小手掌抓取滑动

// grabCursor : true,

//滑动之后回调函数

on: {

slideChangeTransitionEnd: function(){

// console.log(this.activeIndex);//切换结束时,告诉我现在是第几个slide

},

},

//左右点击

navigation: {

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

},

//分页器设置

pagination: {

el: '.swiper-pagination',

clickable :true

}

},

swiperSlides: [1, 2, 3, 4]

}

},

computed: {

swiper() {

return this.$refs.mySwiper.swiper;

}

},

mounted () {

//可以使用swiper这个对象去使用swiper官网中的那些方法

console.log('this is current swiper instance object', this.swiper);

// this.swiper.slideTo(0, 0, false);

}

}

</script>

容易出现的问题

1、vue-awesome-swiper组件pagination小圆点没有显示

2、组件没有自动播放

参考文档:https://segmentfault.com/a/1190000013995395

以上是 vue使用vue-awesome-swiper及一些问题 的全部内容, 来源链接: utcz.com/z/377858.html

回到顶部