基于vue.js轮播组件vue-awesome-swiper实现轮播图


Posted in Javascript onMarch 17, 2017

一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似。

1.安装vie-awesome-swiper

nam install vue-awesome-swiper --save-dev

2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js:

import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper) //记得不要忘记这句

3.Home.vue下使用

<template>
<div>
<swiper :options="swiperOption" ref="mySwiperA">
  <!-- 幻灯内容 -->
  <swiper-slide>slide1</swiper-slide>
  <swiper-slide>slide2</swiper-slide>
  <!-- 以下控件元素均为可选 -->
  <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>
</div>
</template>
<script>
  export default{
    data(){
      return {
        swiperOption: {
          // 所有配置均为可选(同Swiper配置) 
          notNextTick: true,
          autoplay: 3000,
          grabCursor : true,
          setWrapperSize :true,
          autoHeight: true,
          pagination : '.swiper-pagination',
          paginationClickable :true,
          prevButton:'.swiper-button-prev',
          nextButton:'.swiper-button-next',
          scrollbar:'.swiper-scrollbar',
          mousewheelControl : true,
          observeParents:true,
          onTransitionStart(swiper){
           console.log(swiper)
          }
      }
    }
  },
  computed: {
    swiper() {
     return this.$refs.mySwiperA.swiper
    }
  },
  mounted() {
    console.log("每次切换都会触发我");
    this.swiper.slideTo(3, 1000, false)
   }
}
</script>

以上所述是小编给大家介绍的基于vue.js轮播组件vue-awesome-swiper实现轮播图,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
node操作mysql数据库实例详解
Mar 17 #Javascript
vue.js从安装到搭建过程详解
Mar 17 #Javascript
超简单的Vue.js环境搭建教程
Mar 17 #Javascript
Vue.js开发环境快速搭建教程
Mar 17 #Javascript
原生js编写2048小游戏
Mar 17 #Javascript
vue.js开发环境安装教程
Mar 17 #Javascript
jquery 手势密码插件
Mar 17 #Javascript
You might like
ASP知识讲座四
2006/10/09 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
php中的ini配置原理详解
2014/10/14 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
python 实现归并排序算法
2012/06/05 Python
Python实现命令行通讯录实例教程
2016/08/18 Python
Python callable()函数用法实例分析
2018/03/17 Python
windows下python安装pip图文教程
2018/05/25 Python
高考考python编程是真的吗
2020/07/20 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
运动会方阵解说词
2014/02/12 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
物业消防安全责任书
2014/07/23 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
贫困证明怎么写
2015/06/16 职场文书