导航栏切换

约定不等于承诺〃 2021-09-13 16:18 511阅读 0赞

<view class="orderNav">
    			<view class="inv-h-w">
    			   <view :class="['inv-h',Inv==index?'inv-h-se':'']" @click="changeTab(index)" v-for="(item,index) in navList" :key="item.id">{ { item.title}}
    			   </view>
    			</view>
    		</view>
    		<view class="serCon" >
    			<view class="ingCon">
    				<view class="ingTop">
    					<text class="blue">小时工（不擦玻璃）</text>
    					<text class="jiedan">待接单</text>
    				</view>
    			</view>
    			1111111
    		</view>
    		<view class="serCon" v-show="Inv == 1">
    			2222
    		</view>
    		<view class="serCon" v-show="Inv == 2">
    			3333333
    		</view>

export default { 
    		data() { 
    			return { 
    				Inv: 0,
    				navList:[				     { id:0,title:'待服务'},
    				     { id:1,title:'进行中'},
    				     { id:2,title:'已完成'}
    				]
    			};
    		},
    		// components: {ing},
    		methods:{ 
    			changeTab(index){ 
    			    this.Inv = index; 
    			},
    		}
    	}

.orderNav{ 
    	.inv-h-w{ 
    		background-color: #FFFFFF;
    		height: 88upx;
    		display: flex;
    	   .inv-h{ 
    			font-size: 30upx;
    			flex: 1;
    			color: #333333;
    			height: 100upx;
    			line-height: 100upx;
    			display: flex;
    			justify-content: center;
    	   }
    	   .inv-h-se{ 
    			color: #4EB1EF;
    			border-bottom: 5upx solid #4EB1EF;
    	   }
    	}
    }

效果图如下：  
![在这里插入图片描述][20200616141729573.png]

[20200616141729573.png]: /images/20210913/ef780f8a5c09403fa71981eee12e4ea6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，511人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序 - 点击导航栏标签切换变色（导航栏当前hover样式）

效果图 ![在这里插入图片描述][202008171850293.gif_pic_left] 实现这个功能，借助一个切换标识，当与各标签项 `index` 对应

迈不过友情╰/ 2022年11月28日 13:24/ 0 赞/ 414 阅读

相关震惊！纯 CSS 的导航栏切换方案

本文是非常有意思的一篇文章，介绍了 CSS 中，非常强大的一个知识点：如何通过点击某个元素，控制其他元素~ 不用 `Javascript`，使用纯 `CSS` 方案，实现

亦凉/ 2022年11月14日 13:16/ 0 赞/ 175 阅读

相关页面滚动的时候自动切换导航栏

解决方法: 页面主体设置相同的结构如: <body> <div class="items"></div> <div class="items"></div> <div

た入场券/ 2022年06月12日 07:15/ 0 赞/ 363 阅读

相关导航栏

想必大家在百度上见过许多导航栏的代码，下面我来为大家安利三种比较实用的导航栏（仅靠html/css来实现）： 1 下拉菜单栏： <!DOCTYPE html>

深藏阁楼爱情的钟/ 2022年05月25日 10:58/ 0 赞/ 386 阅读

相关导航栏切换效果

在网页中经常会遇到导航栏切换效果，也就是鼠标放到某一导航栏上，底下对应的内容就会发生变化．下面说一下实现思路：首先说下this的用法： this在事件中指向的是事件源对象

落日映苍穹つ/ 2022年05月17日 01:06/ 0 赞/ 402 阅读

相关 mui实现底部导航栏页面切换

1 问题描述 mui是一款最接近原生的框架，对于会使用的人来说十分的便捷易操作，但对于像笔者这样刚入门的小白可是十分的陌生和走了太多的弯路。对于那些不懂的前端的人，或

灰太狼/ 2022年04月23日 06:12/ 0 赞/ 752 阅读

相关 APICloud如何实现顶部导航栏切换功能

第一步、后台添加模板NVVavigationBar ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

以你之姓@/ 2022年03月07日 10:28/ 0 赞/ 346 阅读

相关 bootstrap切换导航栏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

逃离我推掉我的手/ 2022年01月13日 02:41/ 0 赞/ 326 阅读

相关导航栏

今天做一个百度首页的导航栏 ![在这里插入图片描述][20190716200535505.png] <!DOCTYPE html> <html>

「爱情、让人受尽委屈。」/ 2021年12月07日 11:55/ 0 赞/ 499 阅读

相关导航栏切换

<view class="orderNav"> <view class="inv-h-w"> <view :class="['inv-

约定不等于承诺〃/ 2021年09月13日 16:18/ 0 赞/ 512 阅读