带弧度的选项卡源码分享uniapp 小程序可用

最新推荐文章于 2024-05-16 14:33:11 发布

黄河爱浪

最新推荐文章于 2024-05-16 14:33:11 发布

阅读量954

点赞数 2

分类专栏： uni-app 文章标签： css

本文链接：https://blog.csdn.net/u013350495/article/details/120393500

版权

uni-app 专栏收录该内容

19 篇文章 10 订阅

订阅专栏

<template>
	<view>
		<view class="tabs">
			<scroll-view scroll-x="true" :scroll-into-view="scrollView" :scroll-with-animation="true">
				<view class="h-flex-x">
					<view 
						v-for="(item,index) in 10" :key="index" 
						class="tabs-item"
						:class="{
							'active':index == tabIndex,
							'radius-right':index+1 == tabIndex,
							'radius-left':index-1 == tabIndex
						}"
						@tap="tabChange(index)"
						:id="'item-'+index"
						
					>
						<view class="h-flex-x">选项卡{{index+1}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view style="text-align: center;color: #999;margin-top: 50rpx;">
			<view>滚动定位的不想写了，累了~ ⊙﹏⊙</view>
			<view>没滚动需求的可以删除 &lt;scroll-view&gt; 即可</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex:0,
				scrollView:''
			}
		},
		onLoad() {
			
		},
		methods:{
			tabChange(index){
				this.tabIndex = index;
				this.scrollView = `item-${index}`;
			}
		}
	}
</script>

<style lang="scss">
	// flex 水平排列
	.h-flex-x{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
	}
	
	// 选项卡
	.tabs{
		height: 80rpx;
		background-color: #2d6ef0;
		font-size: 28rpx;
		color: #fff;
		white-space: nowrap;
		
		&-item{
			height: 80rpx;
			position: relative;
			
			>view{
				padding: 0 40rpx;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
			}
			
			&.active{
				background-color: #fff;
				color: #333;
				border-radius: 16rpx 16rpx 0 0;
			}
			
			// 左右两项颜色覆盖
			&.radius-left,&.radius-right{
				background-color: #fff;
				> view{
					background-color: #2d6ef0;
				}
			}
			// 左边圆角
			&.radius-left{
				> view{
					border-bottom-left-radius: 16rpx;
				}
			}
			// 右边圆角
			&.radius-right{
				> view{
					border-bottom-right-radius: 16rpx;
				}
			}
		}
	}
</style>