基于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 相关文章推荐
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
javascript对select标签的控制(option选项/select)
Jan 31 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
JavaScript实现彩虹文字效果的方法
Apr 16 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
JQuery控制DIV的选取实现方法
Sep 18 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
JavaScript创建表格的方法
Apr 13 Javascript
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
JAVA/JSP学习系列之二
2006/10/09 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
php利用事务处理转账问题
2015/04/22 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
JS分页效果示例
2013/10/11 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
Python中unittest用法实例
2014/09/25 Python
在Python的循环体中使用else语句的方法
2015/03/30 Python
Python中几种操作字符串的方法的介绍
2015/04/09 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
会计专业自我鉴定
2014/02/10 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
公司口号大全
2014/06/11 职场文书
加油口号大全
2014/06/13 职场文书
校园元旦活动总结
2014/07/09 职场文书
大学运动会通讯稿
2015/07/18 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis