uniapp中常用tab栏切换和改变对应内容

判断当前点击的下标(index)是否和激活(act)相等，相等就添加激活样式……

1、 html

<view>
		
		<view class="nav">
			<view class="nav-list" v-for="(item,index) in list" :key="item.id" @tap="changeAct(item)">

				
				<view :class="[act==index?'name':'']">
					{
    {item.name}}
				view>
				
				<view :class="[act==index?'line':'']">
				view>
			view>

		view>
		
		
		<view class="content">
			<view class="">
				{
    {content.id}}
			view>
			<view class="">
				{
    {content.name}}
			view>
		view>
	view>

2.JavaScript

<script>
	export default {
     
		data() {
     
			return {
     
				// 默认激活样式是第一个
				act: 0,

				list: [{
     
						id: 0,
						name: '吃饭'
					},
					{
     
						id: 1,
						name: '学习'
					},
					{
     
						id: 2,
						name: '睡觉'
					}

				],
				content: ''
			};
		},
		methods: {
     
			changeAct(item) {
     
				// 激活样式是当前点击的对应下标--list中对应id
				this.act = item.id;

				// 可以根据点击事件改变内容
				this.content = item
			}
		},
		onShow() {
     
			// 页面默认显示的是list列表中第一条数据
			this.content = this.list[0]
		}
	}
</script>

3.css