需求
要求轮播图第一次加载看板时,页面刷新,后续定时(10s)切换时,不刷新页面
实现
<div>
<a-button type="link" :class="{activeBtn : activeKey == 0}" @click="handleChange(0)">
数据运营看板
</a-button>
<a-divider
type="vertical"
/>
<a-button type="link" :class="{activeBtn : activeKey == 1}" @click="handleChange(1)">
数据资产看板
</a-button>
<a-divider
type="vertical"
/>
<a-button type="link" :class="{activeBtn : activeKey == 2}" @click="handleChange(2)">
数据报告看板
</a-button>
</div>
<a-carousel
v-if="isRefresh"
ref="carouselRef"
:autoplay="true"
:dots="false"
:pauseOnHover="true"
:autoplaySpeed="10000"
:before-change="beforeChange"
>
<div class="divDaping">
//大屏组件
<daping class="ifr"></daping1>
</div>
<div class="divDaping">
<daping2 class="ifr" v-if="show1"></daping2>
</div>
<div class="divDaping">
<daping3 class="ifr" v-if="show2"></daping3>
</div>
</a-carousel>
data() {
return {
activeKey: 0,
show1: false,
show2: false,
}
}
methods: {
// 判断当前看板是否加载过,没有加载过,则利用v-if进行加载
initDaping(val) {
if(val == 1 && this.show1 === false) {
this.show1 = true;
}
if(val == 2 && this.show2 === false) {
this.show2 = true;
}
},
handleChange (val) {
this.$refs.carouselRef.goTo(val);
this.activeKey = val;
},
// 切换时,初始化看板
beforeChange (from, to) {
this.activeKey = to;
this.initDaping(to);
}
}