Uniapp的标签页，选项栏

我正在参加「掘金·启航计划」

目前只用在这一个项目，没做自动滚动(得手动划，这块功能说不做了，做了个半料子)，没做标签右上角红色圆圈标识(用不着用到了再说)，没做背景色以及选中标签的背景色(也用不着用到了再说)，没做设置单位(默认的rpx跟%)

这是几种做出来的效果图

需求的话

颜色主题的话做了主题色和选中颜色

判断的话默认red，有主题色默认主题色，有选中颜色就选中颜色，也就是越往后优先级越高

图2做了Card的形式模样

主要是根据底下这个线的高度决定的，Card为true就是100%的高度，也可以设置Card样式的半径范围，默认是椭圆的，图2需要把border-radius设置的小一点

宽度高度也都可以设置

行高是根据高度判断的，字体大小默认的28rpx，可以设置那根线的宽高和选项的宽高，主要就是计算一下那根线的移动距离

首先标签宽度需要判断列表的长度，最小20%，用100/数量，设置了width用设置的就是

tabItemWidth() {
	return this.width > 0 ? this.width : this.list.length > 5 ? 20 : 100 / this.list.length
},

那条线也是这种写法，没哈区别

主要是这根线的移动距离，用的绝对定位，单位用的百分比

//计算背景栏的位置
tabBgLeft() {
//默认偏移位置长度
    et offsetLeftDefault = 0
    if (this.width > 0) {
        offsetLeftDefault = this.active * this.width
    } else {
        offsetLeftDefault = this.active * (this.list.length > 5 ? 20 : 100 / this.list.length)
    }
    if (this.lineW > 0) {
//有长度就加上计算后的长度
	return this.tabItemWidth() / 2 - this.lineW / 2 + offsetLeftDefault
    } else {
	return offsetLeftDefault
    }
},

也就是说设置了线的长度还需要算出标签的一半加上线的一半，这样就一直在标签的中间，当然也可以用transform: translate(-50%)改变线的中间点来计算，那前面不就白写了么（o _ o）

我再想想怎么凑五百个字啊

选项多可以滚动，需要在前面样式加上

	* {
		margin: 0;
		padding: 0;

		:-webkit-scrollbar {
			width: 0 !important;
		}

		::-webkit-scrollbar {
			width: 0 !important;
			height: 0;
		}
	}

然后外面标签设置overflow: auto让它可以滚动

里面的li也不能让它们换行

.ul
display: -webkit-box;
white-space: nowrap;
.li
display: inline;

底下是全部代码