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

悠悠 2022-09-12 03:57 165阅读 0赞

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6buE5rKz54ix5rWq_size_20_color_FFFFFF_t_70_g_se_x_16][]

<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>没滚动需求的可以删除 <scroll-view> 即可</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>

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6buE5rKz54ix5rWq_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/1a6fab36d910484ab56320fbf7bda17f.png
[Link 1]: https://blog.csdn.net/u013350495