vue轮播图插件vue-awesome-swiper
2017-11-27 08:41
1096 查看
Vue-Awesome-Swiper
轮播图插件,可以同时支持Vue.js(1.X ~ 2.X),兼顾PC和移动端,SPA和SSR。
例子
安装设置
安装Install vue-awesome-swiper
npm install vue-awesome-swiper --save
vue挂载
// import import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // or require var Vue = require('vue') var VueAwesomeSwiper = require('vue-awesome-swiper') // mount with global Vue.use(VueAwesomeSwiper) // If used in Nuxt.js/SSR, you should keep it only in browser build environment // The `Process. BROWSER_BUILD` itself is just a feature, it is only valid in Nuxt.js, you need to modify it according to your own procedures, such as: in vue official ssr scaffolding it should be` process.browser` if (process.BROWSER_BUILD) { const VueAwesomeSwiper = require('vue-awesome-swiper/ssr') Vue.use(VueAwesomeSwiper) } // mount with component(can't work in Nuxt.js/SSR) import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide } }
SPA与SSR中使用方法的区别
SPA通过组件作用,需要借助ref属性查找swiper实例
SSR通过命令作用,需要借助命令参数查找swiper实例
其他配置和事件一致
SSR中的应用
<!-- You can custom the "mySwiper" name used to find the swiper instance in current component --> <template> <div v-swiper:mySwiper="swiperOption"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="banner in banners"> <img :src="banner"> </div> </div> <div class="swiper-pagination swiper-pagination-bullets"></div> </div> </template> <script> export default { data () { return { banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ], swiperOption: { autoplay: 5000, initialSlide: 1, loop: true, pagination: '.swiper-pagination', onSlideChangeEnd: swiper => { console.log('onSlideChangeEnd', swiper.realIndex) } } } }, mounted() { console.log('app init') setTimeout(() => { this.banners.push('/5.jpg') console.log('banners update') }, 3000) console.log( 'This is current swiper instance object', this.mySwiper, 'It will slideTo banners 3') this.mySwiper.slideTo(3) } } </script>
SPA中的应用
<!-- The ref attr used to find the swiper instance --> <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: { // NotNextTick is a component's own property, and if notNextTick is set to true, the component will not instantiate the swiper through NextTick, which means you can get the swiper object the first time (if you need to use the get swiper object to do what Things, then this property must be true) // 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, // if you need use plugins in the swiper, you can config in here like this // 如果自行设计了插件,那么插件的一些配置相关参数,也应该出现在这个对象中,如下debugger debugger: true, // swiper callbacks // swiper的各种回调函数也可以出现在这个对象中,和swiper官方一样 onTransitionStart(swiper){ console.log(swiper) }, // more Swiper configs and callbacks... // ... } } }, // you can find current swiper instance object like this, while the notNextTick property value must be true // 如果你需要得到当前的swiper对象来做一些事情,你可以像下面这样定义一个方法属性来获取当前的swiper对象,同时notNextTick必须为true computed: { swiper() { return this.$refs.mySwiper.swiper } }, mounted() { // you can use current swiper instance object to do something(swiper methods) // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了 console.log('this is current swiper instance object', this.swiper) this.swiper.slideTo(3, 1000, false) } } </script>
异步数据例子
<template> <swiper :options="swiperOption"> <swiper-slide v-for="slide in swiperSlides">I'm Slide {{ slide }}</swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </template> <script> export default { name: 'carrousel', data() { return { swiperOption: { autoplay: 3500, setWrapperSize :true, pagination : '.swiper-pagination', paginationClickable :true, mousewheelControl : true, observeParents:true, }, swiperSlides: [1, 2, 3, 4, 5] } }, mounted() { setInterval(() => { console.log('simulate async data') let swiperSlides = this.swiperSlides if (swiperSlides.length < 10) swiperSlides.push(swiperSlides.length + 1) }, 3000) } } </script>
移动端例子的代码
SSR例子的代码
API
参考官网: http://www.swiper.com.cn/api/index.html
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue-awesome-swiper(轮播图vue插件)
- vue轮播图插件vue-awesome-swiper的使用代码实例
- 使用vue-awesome-swiper滑块插件
- vue2.0引用vue-awesome-swiper插件实现左右滑动轮播效果
- vue轮播图插件vue-awesome-swiper的使用
- vue-awesome-swiper滑块插件使用方法详解
- vue轮播图插件vue-awesome-swiper的使用
- vue轮播图插件vue-awesome-swiper的引入及使用
- 使用vue-awesome-swiper滑块插件
- vue引入新版 vue-awesome-swiper插件填坑问题
- vue轮播插件vue-awesome-swiper
- vue swiper(vue-awesome-swiper)轮播图
- vue-awesome-swiper轮播图实践
- vue脚手架引入swiper插件
- vue-awesome-swiper组件不能自动播放和导航器小圆点不显示问题
- 使用vue-cli搭建脚手架后引入插件swiper失效
- vue引入swiper插件的使用实例
- vue-awesome-swiper
- vue-awesome-swiper 自动轮播问题
- vue-awesome-swiper 水平滚动异常