要实现的效果:banner轮播的时候顶部导航也跟着banner变颜色,这里我的头部导航跟banner是两个组件,swiper用的是v3的。
mounted() {
let that = this;
new Swiper(".swiper-container", {
loop: true,
// 如果需要分页器
pagination: ".swiper-pagination",
// 如果需要前进后退按钮
// nextButton: '.swiper-button-next',
// prevButton: '.swiper-button-prev',
// 如果需要滚动条
// scrollbar: '.swiper-scrollbar',
//如果需要自动切换海报
autoplay: 5000, //时间 毫秒
autoplayDisableOnInteraction: false, //用户操作之后是否停止自动轮播默认true
onSlideChangeStart: function (swiper) {
// console.log("轮播")
if ((swiper.activeIndex - 1 + 3) % 3 == 0) {
console.log((swiper.activeIndex - 1 + 3) % 3);
swiper.stopAutoplay(); //禁止轮播
}
if ((swiper.activeIndex - 1 + 3) % 3 == 0) {
//判断swiper当前的下标
//因为swiper的特性,所以判断下标不能直接取,需要一些方法
that.fontColor = "color : black";
that.borderColor = "border: 1px solid rgba(255, 255, 255, 0.5)";
} else if ((swiper.activeIndex - 1 + 3) % 3 == 1) {
that.fontColor = "color : rgba(255, 255, 255, 0.7)";
that.borderColor = "border: 1px solid rgba(255, 255, 255, 0.5)";
} else {
that.fontColor = "color : black";
that.borderColor = "border: 1px solid rgba(0, 0, 0, 0.5)";
}
bus.$emit("sendBybus", that.fontColor);//将颜色传给header
bus.$emit("sendColor", that.borderColor);
},
});
},