vue轮播图插件vue-awesome-swiper的使用代码实例


Posted in Javascript onJuly 10, 2017

最近写vue2.0项目中用到了轮播图的一个插件,也就是vue-awesome-swiper,个人感觉还是比较强大的,swiper官网中的API及配置均可使用(支持3.0),以下说下使用该插件的一些步骤:

第一步安装

npm install vue-awesome-swiper --save

第二部在main.js中引入

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

然后就可以在组件中使用该插件

<template> 
  <div> 
    <swiper :options="swiperOption" ref="mySwiper"> 
      <!-- 这部分放你要渲染的那些内容 --> 
      <swiper-slide v-for="item in items"> 
      </swiper-slide> 
      <!-- 这是轮播的小圆点 --> 
      <div class="swiper-pagination" slot="pagination"></div> 
    </swiper> 
  </div> 
</template> 
<script> 
  import { swiper, swiperSlide } from 'vue-awesome-swiper' 
  export default { 
    components: { 
      swiper, 
      swiperSlide 
    }, 
    data() { 
      return { 
        swiperOption: { 
        //是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true 
        notNextTick: true, 
        pagination: '.swiper-pagination', 
        slidesPerView: 'auto', 
        centeredSlides: true, 
        paginationClickable: true, 
        spaceBetween: 30, 
          onSlideChangeEnd: swiper => { 
            //这个位置放swiper的回调方法 
            this.page = swiper.realIndex+1; 
            this.index = swiper.realIndex; 
          } 
        } 
      } 
    }, 
    //定义这个sweiper对象 
    computed: { 
 
      swiper() { 
       return this.$refs.mySwiper.swiper; 
      } 
    }, 
    mounted () { 
      //这边就可以使用swiper这个对象去使用swiper官网中的那些方法 
      this.swiper.slideTo(0, 0, false); 
    } 
 
  } 
</script> 
<style> 
</style>

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

Javascript 相关文章推荐
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
深入理解ES6中let和闭包
Feb 22 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 #Javascript
vue实现表格数据的增删改查
Jul 10 #Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 #Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 #Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 #jQuery
Underscore之Array_动力节点Java学院整理
Jul 10 #Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 #Javascript
You might like
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
浅谈python可视化包Bokeh
2018/02/07 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
python设置环境变量的作用整理
2020/02/17 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
python爬取代理ip的示例
2020/12/18 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
工程概预算专业毕业生求职信
2013/10/04 职场文书
毕业生教师求职信
2013/10/20 职场文书
机械专业毕业生推荐信范文
2013/11/25 职场文书
个人能力自我鉴赏
2014/01/25 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
助理政工师申报材料
2014/06/03 职场文书
幼儿老师求职信
2014/06/30 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
培训通知
2015/04/17 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
Python初学者必备的文件读写指南
2021/06/23 Python