vue轮播图插件vue-awesome-swiper


Posted in Javascript onNovember 27, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js计算任意值之间随机数的方法
Jan 16 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
ES6的新特性概览
Mar 10 Javascript
Sort()函数的多种用法
Mar 20 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
Vue.js -- 过滤器使用总结
Feb 18 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
Vue中实现回车键切换焦点的方法
Feb 19 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
在vue中实现简单页面逆传值的方法
Nov 27 #Javascript
浅析Vue自定义组件的v-model
Nov 26 #Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 #Javascript
Javacript中自定义的map.js  的方法
Nov 26 #Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 #Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 #Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 #Javascript
You might like
php基础知识:类与对象(5) static
2006/12/13 PHP
php记录日志的实现代码
2011/08/08 PHP
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
php设计模式之委托模式
2016/02/13 PHP
php mysql 封装类实例代码
2016/09/18 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
利用js对象弹出一个层
2008/03/26 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
学习自我鉴定
2014/02/01 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
Python多个MP4合成视频的实现方法
2021/07/16 Python