效果图如下：
cc-chooseTab
使用方法
<!-- tabArr:标签数组 current：当前选择序列 tabClick：tab点击事件-->
<cc-chooseTab :tabArr="tabArr" :current="myCurrent" @tabClick="tabClick"></cc-chooseTab>
HTML代码实现部分
<template>
<view class="page">
<!-- tabArr:标签数组 current：当前选择序列 tabClick：tab点击事件-->
<cc-chooseTab :tabArr="tabArr" :current="myCurrent" @tabClick="tabClick"></cc-chooseTab>
<image style="width: 92vw;margin-left: 4vw; margin-top: 60px;" mode="aspectFill" :src="srcArr[myCurrent]">
</image>
<cc-botToolBar @click="botMenuClick"></cc-botToolBar>
</view>
</template>
<script>
export default {
data() {
return {
myCurrent: 0,
// 新时代大湾区港澳台湾
tabArr: ["新时代", "大湾区", "港澳台湾", "暖新闻"],
srcArr: ["../../static/content1.png", "../../static/content2.png", "../../static/content3.png",
"../../static/content4.png"
]
};
},
methods: {
tabClick(flag) {
this.myCurrent = flag;
console.log("点击tab序列 = " + flag);
this.mySrc = this.srcArr[this.myCurrent];
},
botMenuClick(flag) {
console.log("底部菜单按钮点击序列 = " + flag);
}
}
}
</script>
<style scoped lang="scss">
page {
padding-bottom: 70px;
}
</style>