【uni点击导航切换内容，简单版（仅适用于内容固定而且很少的情况下使用）】_uniapp点击文字切换

uni-app实现仿美团菜单，点击导航切换内容（NO.2）

仅适用于内容固定而且很少的情况下使用，导航因为内容少，样式是自己写的，不是滚动型，文字底部高亮是伪类，跟随文字位置

点击左边菜单，右边滚动相应内容

1.template，这里只放切换的代码

	<view>
	<view class="plan1 fle bor_bot">
		<view class="item fle_all " v-for="(item,index) in menu_name" :class="index==lun3?'cur':''" @tap="lun_bo(index)">
			<view class="text ">
				<text class="fle_all"> {{item.name}}</text>
			</view>
			<view class="text2">
				<text>01</text>
			</view>
		</view>
	</view>
		<view class="plan2" v-if="lun3==0">
				点餐
			</view>
			<view class="plan3 fle" v-if="lun3==1">
				评价
			</view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.css

		.plan3 {
		height: 100rpx;
	}

	.plan3 .item {
		padding: 0rpx 40rpx;
	}

	.plan3 .text {
		display: block;
		height: 100%;
		position: relative;
	}

	.plan3 .cur {
		color: #007AFF;
		position: relative;
	}

	.plan3 .cur::after {
		content: '';
		position: absolute;
		left: 58rpx;
		top: auto;
		bottom: -2rpx;
		right: auto;
		height: 6rpx;
		width: 40rpx;
		background-color: #32b66b;
	}

	.plan3 .text text {
		font-size: 36rpx;
		font-weight: bold;
		height: 100%;
	}

	.plan3 .text2 {
		width: 10rpx;
		position: relative;
	}

	.plan3 .text2 text {
		position: absolute;
		top: -6rpx;
		margin-left: 8rpx;
		font-size: 22rpx;
		font-weight: bold;
		color: #bbb;
	}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

3.script

		<script>
	export default {
		data() {
			return {
				menu_name: [{
					name: '点菜'
				}, {
					name: '评价'
				}, {
					name: '商家'
				}],
				lun3: 0,
			}
		},
		methods: {
			lun_bo(e) {
				this.lun3 = e
			},
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

看完点个赞吧