vue-awesome-swiper是基于swiper的一个轮播图插件,使用非常方便。

首先安装下

 npm install vue-awesome-swiper --save

然后在入口文件main.js引入下

import VueAwesomeSwiper from 'vue-awesome-swiper'
import './static/css/swiper.min.css'
Vue.use(VueAwesomeSwiper)

最后运用到组件中

<template>
<div class="scroll">
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination " slot="pagination"></div>
<div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>
<div class="swiper-button-next swiper-button-black" slot="button-next"></div>
<!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
</swiper>
</div>
</template> <script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
name: 'HelloWorld',
components: {
swiper,
swiperSlide
},
data () {
return {
swiperOption: {
notNextTick: true,
//循环
loop:true,
//设定初始化时slide的索引
initialSlide:0,
//自动播放
autoplay:true,
// autoplay: {
// delay: 3000,
// stopOnLastSlide: false,
// disableOnInteraction: true,
// },
// 设置轮播
effect : 'flip',
//滑动速度
speed:800,
//滑动方向
direction : 'horizontal',
//小手掌抓取滑动
// grabCursor : true,
//滑动之后回调函数
on: {
slideChangeTransitionEnd: function(){
// console.log(this.activeIndex);//切换结束时,告诉我现在是第几个slide
},
},
//左右点击
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//分页器设置
pagination: {
el: '.swiper-pagination',
clickable :true
}
},
swiperSlides: [1, 2, 3, 4]
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
mounted () {
//可以使用swiper这个对象去使用swiper官网中的那些方法
console.log('this is current swiper instance object', this.swiper);
// this.swiper.slideTo(0, 0, false);
}
}
</script>

容易出现的问题

1、vue-awesome-swiper组件pagination小圆点没有显示

2、组件没有自动播放

参考文档:https://segmentfault.com/a/1190000013995395

vue使用vue-awesome-swiper及一些问题的更多相关文章

  1. 在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效??

    在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效?? 是因为swiper提前初始化了,那时候数据还没有完全出来.这里有两种解决办法 1. 使用vue提供的$nextTic ...

  2. vue入门 vue与react和Angular的关系和区别

    一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/ ...

  3. Vue (三) --- Vue 组件开发

    ------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...

  4. vue学习:vue+webpack的快速使用指南(新手向)

    一.vue有两种使用方式: 1.下载vue.js <script src="vue.js"></script> 2.使用npm npm install vu ...

  5. Vue 项目 Vue + restfulframework

    Vue 项目 Vue + restfulframework 实现登录认证 - django views class MyResponse(): def __init__(self): self.sta ...

  6. 【vue】vue +element 搭建项目,组件之间通信

    父子组件通信 父 通过props属性给 子传递数据 子 操作 父  this.$parent.XXX 子通过$emit传递参数 或者通过vue-bus vue-bus既可以实现父子组件之间的通信,也可 ...

  7. 【vue】vue +element 搭建项目,vuex中的store使用

    概述: 每一个 Vuex 应用的核心就是 store(仓库).“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的 ...

  8. vue的.vue文件是怎么run起来的(vue-loader)

    vue的.vue文件是怎么run起来的(vue-loader) 引子:vue的.vue文件是怎么跑起来的? 答:通过vue-loader,解析.vue文件,在webpack解析,拆解vue组件 1.v ...

  9. vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤

    通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...

  10. python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

随机推荐

  1. 概率DP自学

    转自https://blog.csdn.net/zy691357966/article/details/46776199 zy691357966的blog 有关概率和期望问题的研究 摘要 在各类信息学 ...

  2. Leetcode 75.颜色分类 By Python

    给定一个包含红色.白色和蓝色,一共 n 个元素的数组,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色.白色.蓝色顺序排列. 此题中,我们使用整数 0. 1 和 2 分别表示红色.白色和蓝色. ...

  3. Codeforces | CF1041F 【Ray in the tube】

    昨天晚上全机房集体开\(Div2\),因为人傻挂两次\(B\)题的我开场就\(rank2000+\dots qwq\)于是慌乱之中的我就开始胡乱看题(口胡),于是看了\(F\dots\)(全机房似乎也 ...

  4. 【转】RO段、RW段和ZI段 --Image$$??$$Limit 含义(zz)

    @2019-02-14 [小记] RO段.RW段和ZI段 --Image$$??$$Limit 含义(zz)

  5. [HEOI2014]逻辑翻译(分治)

    题目描述 在人类的神经系统中,每个信号都可以用?1或+1来表示.这些信号组合起来最后形成 了喜怒哀乐,酸甜苦辣,红黄绿蓝等各种各样的复杂信息.纳米探测科技的突破让生物学家 可以测量大脑中特定区域的完整 ...

  6. NOIP2013花匠(波动序列)

    波动序列的定义不用多说,下面给出波动序列的求法. #include<iostream> #include<cstdio> #define N 100002 using name ...

  7. 买卖股票的最佳时机II

    题目描述 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 如果你最多只允许完成一笔交易(即买入和卖出一支股票),设计一个算法来计算你所能获取的最大利润. 注意你不能在买入股票前卖出股 ...

  8. This license xxx has been cancelled 解决

    上节回顾:JetBrains全家桶破解思路 hosts屏蔽一下即可,Linux是:/etc/hosts 0.0.0.0 account.jetbrains.com 重新输入Code即可,最后补一个地址 ...

  9. Electron入门笔记(一)-自己快速搭建一个app demo

    Electron学习-快速搭建app demo 作者: 狐狸家的鱼 Github: 八至 一.安装Node 1.从node官网下载 ,最好安装.msi后缀名的文件,新手可以查看安装教程进行安装. 2. ...

  10. A1121. Damn Single

    "Damn Single (单身狗)" is the Chinese nickname for someone who is being single. You are suppo ...