前端Vue自定义等宽新闻标签栏标题栏选项卡新闻栏

前端Vue自定义等宽新闻标签栏标题栏选项卡新闻栏，

阅读全文下载完整代码请关注微信公众号： 前端组件开发

效果图如下：

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>