基于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 相关文章推荐
jquery高效反选具体实现
May 05 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
原生js生成图片验证码
Oct 11 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 Javascript
JS创建自定义对象的六种方法总结
Dec 15 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 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
php email邮箱正则
2008/10/08 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
php fread函数使用方法总结
2019/05/28 PHP
用于table内容排序
2006/07/21 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
利用Python实现Windows定时关机功能
2017/03/21 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
Python如何执行系统命令
2020/09/23 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
弘扬职业精神演讲稿
2014/03/20 职场文书
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技