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 相关文章推荐
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
jquery实现邮箱自动补全功能示例分享
Feb 17 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
JQuery中clone方法复制节点
May 18 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
vue实现井字棋游戏
Sep 29 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 Javascript
在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验证码类代码分享(已封装成类)
2011/07/17 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
PHP实现验证码校验功能
2017/11/16 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
JavaScript 事件的一些重要说明
2009/10/25 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
Python实现感知机(PLA)算法
2017/12/20 Python
Python类的继承和多态代码详解
2017/12/27 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
python关闭占用端口方式
2019/12/17 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
总裁办公室主任职责
2014/01/02 职场文书
总账会计岗位职责
2014/03/13 职场文书
警告通知
2015/04/25 职场文书
捐书活动倡议书
2015/04/27 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
请客吃饭开场白
2015/06/01 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android