uniapp小程序：常用tab栏切换，改变对应内容

一、要实现的效果如下：

二、代码实现：

2.1 html

<template>
	<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>
template>

2.2 js

<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>

2.3 css

ending~