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 相关文章推荐
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 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
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
对Python 内建函数和保留字详解
2018/10/15 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
美国智能家居专家:tink
2019/06/04 全球购物
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
婚礼主持结束词
2014/03/13 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
工作求职自荐信
2014/06/13 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
离婚协议书怎么写
2015/01/26 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python