uniapp微信小程序之头部导航

html代码

<!-- 中部导航 -->
		<view class="tabbar">
			<scroll-view scroll-with-animation scroll-x="true">
				<block v-for="(item,index) in tabBars" :key="index">
					<view class="scroll-tab-item" :class="{'active': tabIndex==index}" 
					@tap="toggleTab(index)">
						{{item}}
						<view class="scroll-tab-line"></view>
					</view>
				</block>
			</scroll-view>
		</view>

js代码

data() {
    return {
				tabIndex : 0, //选中标签序列
				tabBars : [ //导航title
					'衣服',
					'电脑',
					'手机',
					'食物',
					'宠物',
					'电器',
					'日常用品',
					'鞋子',
					'刀具'
				]
    }
}
methods: {
			
			//切换选项卡
			toggleTab(index){
				this.tabIndex = index;
			}
}

css 代码

/* 导航 */
	.tabbar scroll-view{
		white-space: nowrap;
		border-bottom: 1upx;
		text-align: center;
		color: #333333;
	}
	.scroll-tab-item{
		display: inline-block;
		margin: 20upx 30upx;
	}
	.active{
		color: #DD524D;
	}
	.active .scroll-tab-line{
		border-bottom: 5upx solid red;
		border-top: 5upx solid red;
		border-radius: 20upx;
	}