vue-awesome-swiper轮播插件的使用方法(代码)
程序员文章站
2022-04-07 12:55:04
...
本篇文章给大家带来的内容是关于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轮播插件的使用方法(代码)的详细内容,更多请关注其它相关文章!
上一篇: python实现对文件中图片生成带标签的txt文件方法
下一篇: 数组方式进行表单提交