首先贴一下解决问题之前的代码:
<!-- Switch Between Tabs -->
<f7-buttons class="analysisButton">
<f7-button tab-link="#tabWater" active>水</f7-button>
<f7-button tab-link="#tabElectric">电</f7-button>
<f7-button tab-link="#tabGas">汽</f7-button>
</f7-buttons>
<!-- Tabs -->
<f7-tabs>
<f7-tab id="tabWater" active>
<!--第一个echarts-->
</f7-tab>
<f7-tab id="tabElectric">
<!--第二个echarts-->
</f7-tab>
<f7-tab id="tabGas">
<!--第三个echarts-->
</f7-tab>
</f7-tabs>
出现问题:
在页面加载时这三个tab会同时都加载出来,造成了除active所在的echarts是正常显示,其他两个不都可以。
最后的解决方法:
<div class="buttons-row analysisButton">
<a href="#" class="active button" @click="tabWater">水</a>
<a href="#" class="button" @click="tabElectric">电</a>
<a href="#" class="button" @click="tabGas">气</a>
</div>
<div v-if="showWater">
<!--第一个echarts-->
</div>
<div v-if="showElectric">
<!--第二个echarts-->
</div>
<div v-if="showGas">
<!--第三个echarts-->
</div>
.js
export default {
data() {
return {
showWater: true,
showElectric: false,
showGas: false
}
},
methods: {
tabWater() {
let _this = this;
_this.showWater = true;
_this.showGas = false;
_this.showElectric = false;
},
tabElectric() {
let _this = this;
_this.showWater = false;
_this.showGas = true;
_this.showElectric = false;
},
tabGas() {
let _this = this;
_this.showWater = false;
_this.showGas = false;
_this.showElectric = true;
}
}
}
每个页面在点击按钮选择以后才显示出来。
ps:如果有错误,希望可以提出来~