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 页面自动加载函数(兼容多浏览器)
May 18 Javascript
Express.JS使用详解
Jul 17 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
Jquery 效果使用详解
Nov 23 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
js中作用域的实例解析
Mar 16 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
JS实现验证码倒计时的注册页面
Jan 02 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 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
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
PHP-redis中文文档介绍
2013/02/07 PHP
测试php函数的方法
2013/11/13 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
js showModalDialog参数的使用详解
2014/01/07 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
JavaScript中的闭包
2016/02/24 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
Python中sort和sorted函数代码解析
2018/01/25 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
大学生职业生涯规划书范文
2014/01/14 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
2014年纪检工作总结
2014/11/12 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
七年级话题作文之执着
2019/11/19 职场文书