uni-app学习(四):带有下划线的标签选择

学了一周uni-app，写个小demo，试试水~

效果图：点击不同场景，下划线切换相应标签下

简单整理了下实现过程，先创建视图容器含有三个标签，场景一，二，三

容器：

<template>

	<view class="cjView">
		
		<view class="select-view">
			<view class="text-item" @tap="selectItem1('场景一')">
				<text>场景一</text>
				

			</view>
			<view class="text-item" @tap="selectItem1('场景二')">
				<text >场景二</text>
				

			</view>
			<view class="text-item" @tap="selectItem1('场景三')">
				<text >场景三</text>
				

			</view>

		</view>



	</view>

</template>

样式：

.select-view {
		width: 100%;
		height: 50rpx;
		margin-top: 10rpx;
		margin-bottom: 45rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;

		.text-item {
			align-items: center;
			display: inline-block;
			width: 15%;

			text {
				width: 30%;
				font-size: 24rpx;
				border: none;
				height: 50rpx;
			}
}

}

效果图：

创建view做下面的下划线，显隐根据绑定标签

<template>

	<view class="cjView">
		
		<view class="select-view">
			<view class="text-item" @tap="selectItem1('场景一')">
				<text>场景一</text>
				<view class="line-Box" v-if="selectId=='场景一'">
				</view>

			</view>
			<view class="text-item" @tap="selectItem1('场景二')">
				<text >场景二</text>
				<view class="line-Box1" v-if="selectId=='场景二'">
				</view>

			</view>
			<view class="text-item" @tap="selectItem1('场景三')">
				<text >场景三</text>
				<view class="line-Box2" v-if="selectId=='场景三'">
				</view>

			</view>

		</view>



	</view>

</template>

下划线样式

.line-Box {
				background-color: black;
				width: 40%;
				height: 3rpx;
				margin-top: 5rpx;
				margin-right: 15rpx;
				margin-left: 15rpx;
			}
			.line-Box1 {
				background-color: black;
				width: 40%;
				height: 3rpx;
				margin-top: 5rpx;
				margin-right: 15rpx;
				margin-left: 15rpx;
			}
			.line-Box2 {
				background-color: black;
				width: 40%;
				height: 3rpx;
				margin-top: 5rpx;
				margin-right: 15rpx;
				margin-left: 15rpx;
			}

标签点击改变selectId

methods: {
			selectItem1(res) {
				this.selectId = res
				console.log(res)
			}
				
		}

ok，效果实现

初学uni-app，样式啥的还是小白级，权当一个思路提供~