vue轮播图插件之vue-awesome-swiper
移动端轮播图插件,在使用iview图形界面插件中的carousel组件无法实现触摸滑动后,转而使用vue-awesome-swiper插件
1.npm安装
npm i vue-awesome-swiper -S
- 我这里安装的是下面的这个版本
2.使用
- 全局导入:
import Vue from 'vue'
import vueSwiper from 'vue-awesome-swiper'
/* 样式的话,我这里有用到分页器,就在全局中引入了样式 */
import 'swiper/dist/css/swiper.css'
Vue.use(vueSwiper);
- 组件引入
import { swiper, swiperSlide } from "vue-awesome-swiper";
require("swiper/dist/css/swiper.css");
components: {
swiper,
swiperSlide
},
- 在template中使用
<swiper :options="swiperOption" class="swiper-wrap" ref="mySwiper" v-if="banner.length!=0">
<swiper-slide v-for="(item,index) in banner" :key="index" >
<img :src="item.image" alt="" />
</swiper-slide>
<!-- 常见的小圆点 -->
<div class="swiper-pagination" v-for="(item,index) in banner" :key="index" slot="pagination" ></div>
</swiper>
<!-- 显示数字 -->
<div class="number">{{imgIndex}}/{{detailimages.length}}</div>
- data中配置
data() {
const that = this;
return {
imgIndex: 1,
swiperOption: {
//是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true
notNextTick: true,
//循环
loop: true,
//设定初始化时slide的索引
initialSlide: 0,
//自动播放
autoplay: {
delay: 1500,
stopOnLastSlide: false,
/* 触摸滑动后是否继续轮播 */
disableOnInteraction: false
},
//滑动速度
speed: 800,
//滑动方向
direction: "horizontal",
//小手掌抓取滑动
grabCursor: true,
on: {
//滑动之后回调函数
slideChangeTransitionStart: function() {
/* realIndex为滚动到当前的slide索引值 */
that.imgIndex= this.realIndex - 1;
},
},
//分页器设置
pagination: {
el: ".swiper-pagination",
clickable: true,
type: "bullets"
}
}
};
},
3.遇见的问题
- 这个插件,在图片只有一张时,仍然会自动滚动
这里很需要注意的一点就是,如果你直接设置autoplay为true的话,在你触摸滑动图片后,他就不会再自动滚动了
/* 这里我是在使用接口请求后,对返回的数据进行判断 */
created() {
this.$Request({
url: '',
method: 'get',
success: res => {
this.swiperOption.autoplay = res.result.data.length != 1 ? {
delay: 1500,
stopOnLastSlide: false,
disableOnInteraction: false
} : false;
}
})
}
- 在on里面,监听slideChangeTransitionStart方法时,在开始的时候,我用的是activeIndex来设置对应的索引值,这个的话,滑向下一张没有发现问题,后面,自己试着滑向上一张图片,就发现出现问题,这个值不对应了,使用realIndex
on: {
slideChangeTransitionStart: function() {
that.imgIndex = this.realIndex + 1;
},
},
- 在swiper这个容器中,会出现滚动到最后一张图片后就不自动滚动了,以及出现底边的小圆点写了后不显示的问题
原因是因为this.commodity刚开始数据为[],后来赋值才有值,所以要先判断this.commodity是否为空,这里就在swiper这个容器中进行判断,若数据长度为0,就不显示这个容器
<swiper class='swiImgs' :options="swiperOption" v-if="commodity.length!=0"></swiper>
正在努力学习中,若对你的学习有帮助,留下你的印记呗(点个赞咯^_^)
来源:https://segmentfault.com/a/1190000016402768
vue轮播图插件之vue-awesome-swiper的更多相关文章
- Vue轮播图插件---Vue-Awesome-Swiper
轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- vue轮播图插件vue-awesome-swiper的使用与组件化
不管是APP还是移动端网页开发,轮播图在大部分项目当中都是存在的,这时候如果用vue开发项目,选择一款好的插件并且封装好是很重要的 1. 推荐使用vue-awesome-swiper 安装:cnpm ...
- vue 轮播图插件 vue-awesome-swiper
1.npm安装 npm install vue-awesome-swiper --save 2.vue 引入 //在main.js 中全局引入 import VueAwesomeSwiper from ...
- 轮播图模块(vue)
轮播图模块(vue) 通过属性方式传值 值为一个数组.每一项含有imgUrl(图片地址).link(跳转链接),link为可选属性 <template> <div class=&qu ...
- 学习笔记: js插件 —— SuperSlide 2 (轮播图插件,PC用)
SuperSlide 2 轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
- 第124天:移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
随机推荐
- reac-native + typescript 的环境搭建
一. RN-TS环境搭建 . 安装RN脚手架 yarn add create-react-native-app -g yarn global add typescript . 创建项目文件夹 crea ...
- C++面向对象高级编程(下)-Geekband
11, 组合和继承 一, Composition 复合 has-a的关系 简单来讲, 就是: class A{ classB b1; }; 这里讲到Adapter设计模式: templa ...
- 通过three.js实现简易3D打印模型切片展示
现在的页面展示要求越来越高,美的展示总能吸引更多的访客.最近在学习3D打印中的切片算法,刚刚入门,发现通过three.js框架可以很好展示出3D切片细节(虽然我做的比较简单). //========= ...
- 2014-VGG-《Very deep convolutional networks for large-scale image recognition》翻译
2014-VGG-<Very deep convolutional networks for large-scale image recognition>翻译 原文:http://xues ...
- 嘴巴题5 「BZOJ1864」[ZJOI2006] 三色二叉树
1864: [Zjoi2006]三色二叉树 Time Limit: 1 Sec Memory Limit: 64 MB Submit: 1195 Solved: 882 [Submit][Status ...
- Odoo使用jsonrpc协议
在controller添加一个test方法, 不需参数 @http.route('/test', type = 'json', auth = 'public') def test(self): pha ...
- 廖雪峰Java11多线程编程-1线程的概念-3线程的状态
1线程的状态 线程终止的的原因: run()或call()方法执行完成,线程正常结束 线程抛出一个未捕获的Exception或Error 直接调用该线程的stop()方法来结束该线程--该方法容易导致 ...
- BZOJ 1874: [BeiJing2009 WinterCamp]取石子游戏
Time Limit: 5 Sec Memory Limit: 162 MB Submit: 957 Solved: 394 [Submit][Status][Discuss] Description ...
- 工控安全入门(三)—— 再解S7comm
之前的文章我们都是在ctf的基础上学习工控协议知识的,显然这样对于S7comm的认识还不够深刻,这次就做一个实战补全,看看S7comm还有哪些值得我们深挖的地方. 本篇是对S7comm的补全和实战,阅 ...
- win10文件名或文件路径过长导致无法删除或复制的解决办法
试过了百度上的所有方法,命令行中del没有作用,Unlocker也没用,批处理也不起作用,360的强力删除也没有作用. 最后找到一种方法,在压缩该文件的时候选择删除源文件. 但是需要注意一点,用360 ...