带弧度的选项卡源码分享uniapp 小程序可用_uniapp 做一个圆弧形菜单

<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>

作者：黄河爱浪 QQ：1846492969，邮箱：helang.love@qq.com

公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处