vue-awesome-swiper 轮播图使用
最近在做vue 的轮播图的问题,项目中也遇到一些问题,查了 swiper 官网资料,
还有vue-awesome-swiper的文案,最后把怎么使用这个插件简单的说下,啥东西都需要自己实践下,还是老规矩举个例子:
就是这个轮播图:d
1. npm install vue-awesome-swiper --save
2.在main.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
//然后就可以在组件中使用该插件
3.在你的页面使用:
<template>
<div>
<swiper :options="swiperOption" class="" ref="mySwiper">
<swiper-slide v-for="banner in banners" :key="banner.index">
<img :src="banner" class="swiper-img">
</swiper-slide>
<!-- 这是轮播的小圆点 -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
4.就是 script里面使用
data() {
return {
swiperOption: {
//链接http://www.swiper.com.cn/api/
loop: false, //无线滚动
autoplay: {
delay: 1500,
disableOnInteraction: false //不停止切换
},
//slidesPerview:3,//显示容器同时的数量
//observer:true,//修改swiper自己或子元素时,自动初始化swiper
speed: 1500,
spaceBetween: 15,
direction: "horizontal",
autoHeight: true,
pagination: {
el: ".swiper-pagination"
},
slidesPerView: "auto"
},
};
},
//定义这个sweiper对象
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
mounted() {
//这边就可以使用swiper这个对象去使用swiper官网中的那些方法
this.swiper.slideTo(0, 0, false);
},
watch: {
$route(to, from) {
console.log(this.$route.name);
this.toMove();
}
},
methods: {
toMove() {
//console.log(this.swiper);
this.swiper.autoplay.run(); //这个方法就可以无限循环啦 哈哈
}
}
最后:this.swiper.autoplay.run();通过watch监听路由跳转然后实现轮播图无限循环的,
嘿嘿,感觉解决BUG的能力越来越强了 ,哈哈,
以上就是使用 vue-awesome-swiper 的具体方法和代码,希望能有帮助 哈哈
vue-awesome-swiper 轮播图使用的更多相关文章
- Swiper轮播图
今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码: <!DOCTYPE html> <html lang="en"> < ...
- 微信小程序_(组件)swiper轮播图
微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...
- swiper轮播图--兼容IE8
//引入idangerous.swiper.min.js var mySwiper = new Swiper ('.swiper-container', { loop: true, paginatio ...
- 微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
- swiper 轮播图,拖动之后继续轮播
在此贴出swiper官网地址:https://www.swiper.com.cn/api/index.html 示例如下(官网示例): <script> var mySwiper = ne ...
- swiper轮播图(逆向自动切换类似于无限循环)
swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...
- 如何自定义微信小程序swiper轮播图面板指示点的样式
https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...
- 自定义微信小程序swiper轮播图面板指示点的样式
微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组 ...
- swiper轮播图插件
一.简介 ①Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. ②Swiper 是一款免费以及 ...
- vue2 使用 swiper 轮播图效果
第一步.先安装swiper插件 npm install swiper@3.4.1 --save-dev 第二步.组件内引入swiper插件 import Swiper from 'swiper' im ...
随机推荐
- 216组合总和III
题目:找出所有相加之和为 n 的 k 个数的组合.组合中只允许含有 1 - 9 的正整数,并且每种组合中不存在重复的数字.说明:所有数字都是正整数.解集不能包含重复的组合. 示例 1:输入: k = ...
- C#程序 给IE网页IFRAME控件中所嵌入网页的元素赋值
//引用COM组件//Microsoft HTML Object Library//Microsoft Internet Controls SHDocVw.ShellWindows shellWind ...
- 浏览器从输入URL到渲染出页面发生了什么
总体来说分为以下几个过程: 1. DNS解析 2. TCP连接 3. 发送HTTP请求 4. 服务器处理请求并返回HTTP报文 5. 浏览器解析渲染页面 6. 连接结束 参考资料:[https:// ...
- GO——beego安装及新建项目(一)
beego简介 Beego是一个快速开发Go应用的http框架,可用于快速开发Api.web及后端服务等各种应用,是一个RESTful框架. beego的架构 Beego由八个独立模块构建,是一个高度 ...
- MySQL:添加用户、删除用户、授权、远程访问、修改密码
1.创建用户 #test表示你要建立的用户名,后面的123456表示密码, #localhost限制在固定地址localhost登陆 CREATE USER test@localhost IDENTI ...
- P4995 跳跳!
喵喵喵好久没做过贪心的题目了,刷一下免得忘了嘤嘤嘤 题面 虽然是黄题,但是我承认并不是很难,so看代码吧还是.. #include<set> #include<map> #in ...
- C语言循环队列
#include<stdio.h> #include<stdlib.h> #include<string.h> //循环队列 typedef struct { in ...
- k8s--kubernetes存储之Volume
Volume 容器磁盘上的文件的生命周期是短暂的,这就使得在容器中运行重要应用时会出现一些问题.首先,当容器崩溃时, kubelet会重启它,但是容器中的文件将丢失--容器以干净的状态(镜像最初的状态 ...
- 2017.9.23 C组比赛总结
今天又回到了C组,感觉爽歪歪~分数终于是个三位数了,yes! 第一题,赛车.水!只用一个贪心就可以AC了. first,以速度为关键字小到大qsort一下... scond,枚举每一个赛车,看看它可以 ...
- 文件的三种打开方式及with管理文件上下文
文件的三种打开方式及with管理文件上下文 一.文件的三种打开方式 1.1 只读 f = open(r'D:\pycharm\yjy\上海python学习\456.txt','r',encoding= ...