vue-awesome-swiper轮播插件的使用方法(代码)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue-awesome-swiper轮播插件的使用方法(代码),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3054字,纯文字阅读大概需要5分钟。
内容图文
本篇文章给大家带来的内容是关于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> <!-- 常见的小圆点 --> <p class="swiper-pagination" v-for="(item,index) in banner" :key="index" slot="pagination" ></p> </swiper> <!-- 显示数字 --> <p class="number">{{imgIndex}}/{{detailimages.length}}</p>
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.遇见的问题
这个插件,在图片只有一张时,仍然会自动滚动
/* 这里我是在使用接口请求后,对返回的数据进行判断 */ 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>
相关推荐:
vue中如何使用swiper轮播插件来实现轮播图(代码分析)
有关vue-awesome-swiper插件问题
以上就是vue-awesome-swiper轮播插件的使用方法(代码)的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的vue-awesome-swiper轮播插件的使用方法(代码)全部内容,希望文章能够帮你解决vue-awesome-swiper轮播插件的使用方法(代码)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。