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 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
js实现圆盘记速表
Aug 03 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
详解JS函数防抖
Jun 05 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
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
PHP Cookie学习笔记
2016/08/23 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
让焦点自动跳转
2006/07/01 Javascript
json 定义
2008/06/10 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
AngularJS基础知识
2014/12/21 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
JS中的BOM应用
2018/02/02 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
zbar解码二维码和条形码示例
2014/02/07 Python
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
Python操作mongodb的9个步骤
2018/06/04 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
大学生关于奋斗的演讲稿
2014/01/09 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
司机岗位职责说明书
2014/07/29 职场文书
简单租房协议书范本
2014/08/20 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
幼儿园辞职信
2015/05/13 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
体育委员竞选稿
2015/11/21 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android