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 相关文章推荐
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
jquery ajax 登录验证实现代码
Sep 23 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
移动端js图片查看器
Nov 17 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
JS实现给数组对象排序的方法分析
Jun 24 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
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
img的onload的另类用法
2008/01/10 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
全面理解闭包机制
2016/07/11 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
Django内容增加富文本功能的实例
2017/10/17 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
使用Tkinter制作信息提示框
2020/02/18 Python
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
教学反思怎么写
2016/02/24 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
Go语言怎么使用变长参数函数
2022/07/15 Golang