移动端轮播图插件,在使用iview图形界面插件中的carousel组件没法实现触摸滑动后,转而使用vue-awesome-swiper插件
npm i vue-awesome-swiper -S
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 },
<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() { 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" } } }; },
这里很须要注意的一点就是,若是你直接设置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: function() { that.imgIndex = this.realIndex + 1; }, },
缘由是由于this.commodity刚开始数据为[],后来赋值才有值,因此要先判断this.commodity是否为空,这里就在swiper这个容器中进行判断,若数据长度为0,就不显示这个容器
<swiper class='swiImgs' :options="swiperOption" v-if="commodity.length!=0"></swiper>
正在努力学习中,若对你的学习有帮助,留下你的印记呗(点个赞咯^_^)
往期好文推荐:css