第一张不显示的问题在于 swiper 的loop属性如果true则下标打印到navList.length+1张
最简单的方法是loop:false;
版本:
"swiper": "3.4.1",
"vue-awesome-swiper": "^3.1.3",
加载tab
<ul class="nav">
<li
v-for="(item, index) in navList"
:key="index"
class="itemNav"
:class="{ active: index == activeIndex }"
@click="menuShow(index)"
>
{{ item }}
</li>
</ul>
·
<div class="swiper_box">
<swiper
ref="mySwiper"
:options="swiperOption"
v-if="navList.length > 1"
>
<swiper-slide
class="swiper-wrapper"
v-for="(item, index) in navList"
:key="index"
>
<!-- <div v-if="index == 0" class="navswiper">
<swiper-one
:Dian1="DianList"
v-if="DianList.length > 0"
></swiper-one>
</div> -->
···
</swiper-slide>
</swiper>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
data() {
return {
navList: [
// 各楼宇电,各楼宇水,自来水用量,天然气,蒸汽,餐厅流量
"1",
"2",
"3",
"4",
"5",
"6"
],
activeIndex: 0,
// 轮播图
swiperOption: {
observeParents: true,
pagination: ".swiper-pagination",
paginationClickable: true, //分页可点击
slidesPerView: 1, //每次滑动图片一张
slidesPerGroup: 1, //每个div只有一张图片
loop: false, //false 不循环 true循环
// grabCursor: true, //鼠标光标
fadeEffect: {
crossFade: true
},
autoplay: {
delay: 2000, //秒
stopOnLastSlide: false,
disableOnInteraction: false //滑动不会失效
}
},
},
components: {
swiper,
swiperSlide
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
mounted() {
let _this = this; //轮播
this.swiper.on("slideChangeTransitionStart", function() {
if (this.activeIndex == _this.navList.length + 1) {
_this.activeIndex = 1;
} else {
_this.activeIndex = this.activeIndex;
}
});
},
methods: {
menuShow(index) {
console.log("click", index);
this.swiper.slideTo(index);
},}