因为找不到原来那篇文章的作者，所以备份一份

tabbar

<template>
	<view>
		<view class="content">
			<scroll-view class="noScorll bar-view" scroll-x scroll-with-animation>
				<view class="titleBar">

					<view class="barItem" v-for="(item,index) in tabs" :key="index" @click="changeTab(index)">
						<view :class="{'textBar':index==tabIndex,'textBar2':index!=tabIndex}">{{item.date}}</view>
						<view :class="{'bottomLine':index==tabIndex,'bottomLine2':index!=tabIndex}"></view>
					</view>

				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			tabIndex: {
				type: Number,
				default: 0
			},
			tabs: { // 标签选项数组
				type: Array,
				default: () => [{
						id: 1,
						name: '1'
					},
					{
						id: 2,
						name: '2'
					},
					{
						id: 3,
						name: '3'
					}
				]
			}
		},

		data() {
			return {

			}
		},
		methods: {

			//  切换标签选项
			changeTab(index) {
				this.$emit('changetab', index)
			}

		}
	}
</script>

<style>
	page{
		background-color: #F6F6F6;
	}
	.content {
		background-color: #FFFFFF;
		padding: 20rpx 0px;
	}

	.bar-view {
		width: 100%;
		text-align: center;
		white-space: nowrap;

	}

	.titleBar {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.barItem {
		display: flex;
		flex-direction: column;
		margin-right: 40rpx;
	}

	.bottomLine {
		width: 100%;
		height: 10rpx;
		background-color: #2b8ef7;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}

	.bottomLine2 {
		width: 70rpx;
		height: 10rpx;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}

	.textBar {
		color: #2b8ef7;
	}

	.textBar2 {
		color: #160e05;
	}

	.line {
		height: 1px;
		background-color: #CCCCCC;
		margin: 20rpx 20rpx;
	}
</style>

页面：

<template>
	<view class="uni-bgc">
		<view class="uni-tabbara">
			<tab-bar ref="tabBar" :tabs="tabs" :tabIndex="tabIndex" @changetab="changetab"></tab-bar>
		</view>
	</view>
	<view>
		<content :showcontent="showcontent" />
	</view>
</template>

<script>
import tabBar from '@/pages/components/toptabbar/toptabbar.vue'
import content from './content.vue'
export default {
	components: {
		tabBar,
		content
	},
	data() {
		return {
			tabs: [],
			tabIndex: 0, // 当前tab的下标
			showcontent:{},//展示的内容
		}
	},
	onShow(){
		this.initialization()
	},
	methods:{
		initialization(){
			// 获取餐饮信息
			this.$api('wx.getMealInfoList').then(res=>{
				this.tabs = res.data
				this.showcontent = this.tabs[this.tabIndex]
			})
		},
		changetab(index){
			this.tabIndex = index
			this.showcontent = this.tabs[this.tabIndex]
		}
	}
}
</script>

<style lang="scss">
	page{
		background-color: #F6F6F6;
	}
	.uni-bgc{
		background-color: #fff;
		.uni-tabbara{
		    border-bottom: 1px solid #C0C0C0;
		    padding: 0 30rpx;
		}
	}
	
</style>

内容，content文件

<template>
	<view class="uni-content" v-if="item">
		内容
	</view>
</template>
<script>
	export default{
		props:['item'],
	}
</script>