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 相关文章推荐
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
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 array_slice函数的使用以及参数详解
2008/08/30 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
iOS10推送通知开发教程
2016/09/19 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
Firefox div高度自适应
2009/04/28 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
python3 enum模块的应用实例详解
2019/08/12 Python
Python3进制之间的转换代码实例
2019/08/24 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
幼儿园教师获奖感言
2014/03/11 职场文书
中学生家长评语大全
2014/04/16 职场文书
学习三严三实心得体会
2014/10/13 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
python文件目录操作之os模块
2021/05/08 Python
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript