<view class="v-float v-tab">
	<view class="v-tab-title" :class="curPagetab == '0' ? 'is-active' : ''" @click="pageTabClick('0')">
		<span>全省排行</span>
	</view>
	<view class="v-tab-title" :class="curPagetab == '1' ? 'is-active' : ''" @click="pageTabClick('1')">
		<span>分公司排行</span>
	</view>
	<view class="v-tab-title" :class="curPagetab == '2' ? 'is-active' : ''" @click="pageTabClick('2')">
		<span>部门排行</span>
	</view>
</view>

<!-- css样式 -->
.v-float {
	display: flex;
	justify-content: space-between;
}

.v-tab {
	width: 668rpx;
	margin: auto;
	height: 68rpx;
	background-color: #e6e6e6;
	/* 设置圆角 */
	border-radius: 60rpx 60rpx 60rpx 60rpx;
	margin-top: 15px;

	.v-tab-title {
		line-height: 68rpx;
		width: 200rpx;
		height: 60rpx;
		border-radius: 40rpx;
		text-align: center;
		font-size: 12pt;
		color: #757575;
	}

	.is-active {
		height: 54rpx;
		align-self: center;
		text-align: center;
		line-height: 54rpx;
		font-size: 14pt;
		color: #323232;
		background: rgba(255, 255, 255, 0.8);
	}
}

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。是一种现代的css布局方式，现在已被大多数主流浏览器所支持。

有关 flex 布局的更多资料，可以自行查阅，本文不做详细说明。本文假设你已经知道了 flex 布局的基本用法。

接下来，请大家看一张图片

适用场景

首先我们要明白，为什么需要使用自定义tab栏
大家首先看一下uniapp关于原生tab跳转的api文档
https://uniapp.dcloud.net.cn/api/router.html#switchtab
大家可以清楚的看到，switchTab和navigateTo的差异为url后面是否可以携带参数
当我们在做一个简单的uniapp项目时，可能tab之间的切换，或者从其他页面前往tab页面的时候，不需要携带参数。但是，一旦我们需要携带参数跳转到tab页面的时候，原生的tab页面无法实现参数的携带。这个时候，我们就需要去构建一个通用的tab组件去实现它的跳转。并且，原生tab栏不支持你在上面做太多的样式拓展

「HTML+CSS」--自定义加载动画【023】

效果展示

在过去十年左右的时间里，浮动是布置复杂网页的唯一选择。因此，即使在旧版浏览器中，它们也得到了很好的支持，开发人员已经使用它们来构建数百万个网页。

flexbox “柔性框”或“弹性框”布局模式提供了浮动的替代方法，用于定义网页的整体外观。浮动仅允许我们水平放置箱子，而弹性框让我们完全控制箱子的对齐方式、方向、顺序和大小。

1.作用域

JavaScript是函数级作用域编程语言:变量只在其定义时所在的function内部有意义。

function fn(){
    let a = 10;  //变量a在fn函数内部定义  fn就是a的作用域  变量a被称为局部变量  
}

fn();
?
console.log(a); //报错

年初用Hugo搭建了个人博客，日常的一些想法和复盘都会记录在上面，写了大半年了，还是觉得博客不太能够满足个人的需求，博客虽然有标签、分类，也可以分享，但是没有那么的直观和好用。