【样式集合1】tab 栏

最新推荐文章于 2024-07-11 18:00:32 发布

嘿，小苹果

最新推荐文章于 2024-07-11 18:00:32 发布

阅读量221

点赞数

分类专栏：样式集合文章标签： javascript

本文链接：https://blog.csdn.net/AAAXiaoApple/article/details/126011451

版权

样式集合专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述
template


<view class="subsection">
			<view v-for="(item,index) in list" :key="index" @click="tabsChange(index)">
				<view :class="{active: index == current}">
					{{item.name}}
				</view>
			</view>
		</view>

list: [{
		name: '总金额'
		}, {
			name: '礼品'
		}, {
			name: '票数',
		}],
		current:0, // 0 总金额 1 礼品 2 票数


	// tab栏  切换
			function tabsChange(index){
				console.log(index)
				state.current = index;
			}

style

.subsection{
		height: 96rpx;
		line-height: 96rpx;
		background-color: #fff;
		font-size: 32rpx;
		font-weight: 400;
		color: #777777;
		line-height: 44rpx;
		disflex：flex；
		align-item：center；
		justify-content: space-around;
		.active{
			color: #333;
			font-weight: 500;
			border-bottom: 4rpx solid #5377B5;
		}
	}