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 document.images实例
May 27 Javascript
javascript 新浪背投广告实现代码
Jul 07 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
Js实现自定义右键行为
Mar 26 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
php设计模式 Observer(观察者模式)
2011/06/26 PHP
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
详解javascript遍历方式
2015/11/11 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
js实现列表按字母排序
2020/08/11 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
Python中关键字is与==的区别简述
2014/07/31 Python
python操作列表的函数使用代码详解
2017/12/28 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
诚信承诺书范文
2014/03/27 职场文书
小学生操行评语大全
2014/04/22 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
赡养老人协议书范本
2015/08/06 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
Python制作春联的示例代码
2022/01/22 Python
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js
Win11开始菜单添加休眠选项
2022/04/19 数码科技
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技