vue-awesome-swiper滑块插件使用方法详解


Posted in Javascript onNovember 27, 2017

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

github地址: https://github.com/surmon-china/vue-awesome-swiper.git

1.进入项目目录,安装swiper

npm install vue-awesome-swiper --save

2.引入资源

//vue滑块
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

3.编辑组件

<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>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
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',
  effect:"coverflow",
  grabCursor : true,
  setWrapperSize :true,
  // autoHeight: true,
  // paginationType:"bullets",
  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...
  // ...
  }
 }
 },components: {
 swiper,
 swiperSlide
},
 // 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>

根据官方api进行调整

http://www.swiper.com.cn/api/pagination/2016/0126/299.html

vue-awesome-swiper滑块插件使用方法详解

我的git demo可以参考 :https://github.com/ssdpj/mk/tree/vue-admine

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

Javascript 相关文章推荐
jquery关于图形报表的运用实现代码
Jan 06 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
js实现列表按字母排序
Aug 11 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 20 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 #Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 #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
You might like
递归列出所有文件和目录
2006/10/09 PHP
FCKeditor的安装(PHP)
2007/01/13 PHP
基于initPHP的框架介绍
2013/04/18 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
浅析Python 中整型对象存储的位置
2016/05/16 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
一套C#面试题
2013/10/09 面试题
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
交通事故调解协议书
2014/04/16 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
部门2014年度工作总结
2014/11/12 职场文书
好媳妇事迹材料
2014/12/24 职场文书
教师党员自我评价范文
2015/03/04 职场文书
高三生物教学反思
2016/02/22 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript