vue轮播图插件vue-awesome-swiper
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
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="http://9i0i.com/pic.php?p=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 解决通过this.$refs来获取DOM或者组件报错问题
这篇文章主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
小编最近遇到这样的需求,当点击一个按钮可以变换里面字的内容,刚开始还真是一头雾水,不知所措。仔细想想屡屡思绪,很容易的解决了。接下来通过本文给大家介绍elementUI Vue 单个按钮显示和隐藏的变换功能,需要的朋友可以参考下2018-09-09vue element-ui实现el-table表格多选以及回显方式
这篇文章主要介绍了vue element-ui实现el-table表格多选以及回显方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-07-07
最新评论