Swiper在Vue2中的简单使用方法
以swiper3为例
一、全局引入
1. 下载swiper3
cnpm install swiper@3 vue-awesome-swiper@3 --save-dev
2. 在main.js中引入Vue-Awesome-Swiper
import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' // 全局挂载 Vue.use(VueAwesomeSwiper)
3. 在swiper.vue中
<template> <div> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide>I'm Slide 1</swiper-slide> <swiper-slide>I'm Slide 2</swiper-slide> <swiper-slide>I'm Slide 3</swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div> </template> <script> export default { name: 'HomeSwiper', data () { return { swiperOption: { loop: true, autoplay: { delay: 3000, stopOnLastSlide: false, disableOnInteraction: false }, pagination: { el: '.swiper-pagination', type: 'fraction', clickable: true }, } } } } </script> <style lang="scss" scoped></style>
注意分页器的写法
2.6.7版本
swiperOption: { loop: true,//可选选项,开启循环 autoplay: 5000,//可选选项,自动滑动 pagination: '.swiper-pagination', paginationType: 'fraction', paginationClickable: true }
3.1.3版本
swiperOption: { loop: true, autoplay: { delay: 3000, stopOnLastSlide: true, //当切换到最后一个slide时停止自动切换 disableOnInteraction: true //用户操作swiper之后,是否禁止autoplay }, pagination: { el: '.swiper-pagination', type: 'fraction', clickable: true } }
二、按需引入
1. 下载swiper3
cnpm install swiper@3 vue-awesome-swiper@3 --save-dev
2. 在swiper.vue中 引入样式和组件
<template> <div> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide>I'm Slide 1</swiper-slide> <swiper-slide>I'm Slide 2</swiper-slide> <swiper-slide>I'm Slide 3</swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div> </template> <script> import { swiper, swiperSlide } from "vue-awesome-swiper"; import "swiper/dist/css/swiper.css"; export default { name: 'HomeSwiper', components: { swiper, swiperSlide }, data () { return { swiperOption: { loop: true, autoplay: { delay: 3000, stopOnLastSlide: false, disableOnInteraction: false }, pagination: { el: '.swiper-pagination', clickable: true } } } } } </script> <style lang="scss" scoped></style>
loop: true失效问题
数据是写死的时候,能够loop:true是有效的;
数据是动态获取的loop:true就会失效。
解决办法:
加上v-if="list.length"有效解决
computed: { isShowSwiper () { return this.list.length } }
总结
到此这篇关于Swiper在Vue2中的简单使用方法的文章就介绍到这了,更多相关Vue2使用Swiper内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
如何为vuex实现带参数的 getter和state.commit
这篇文章主要介绍了如何为vuex实现带参数的getter和state.commit,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-01-01element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
这篇文章主要介绍了element日历calendar组件上月、今天、下月、日历块点击事件及模板源码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-07-07
最新评论