uni-app选项卡组件

左手的ㄟ右手 2022-10-08 02:28 369阅读 0赞

![20210620130001919.png][]

<template>
    	<view class="tab">
    		<scroll-view scroll-x="true" class="tab-scroll">
    			<view class="tab-scroll-box">
    				<view class="tab-scroll-box-item" :class="{active:activeIndex===index}" @click="clickTab(item,index)"
    					v-for="(item,index) in list" :key="index">
    					{
       {item.name}}
    				</view>
    			</view>
    		</scroll-view>
    		<view class="tab-icon">
    			<uni-icons type="gear" size="26" color="#666"></uni-icons>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		name: "tab",
    		props: {
    			list: {
    				type: Array,
    				default () {
    					return []
    				}
    			}
    		},
    		created() {
    			console.log(this.list);
    		},
    		data() {
    			return {
    				activeIndex: 0
    			};
    		},
    		methods: {
    			clickTab(item, index) {
    				this.activeIndex = index
    				this.$emit('tab', {
    					item,
    					index
    				})
    			}
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	.tab {
    		display: flex;
    		background-color: #FFFFFF;
    		border-bottom: 1px solid #f5f5f5;
    		width: 100%;
    
    		.tab-scroll {
    			// flex: 1;
    			overflow: hidden;
    
    			.tab-scroll-box {
    				display: flex;
    				// 垂直居中
    				align-items: center;
    				// flex-wrap: nowrap;
    				height: 45px;
    
    				.tab-scroll-box-item {
    					// 控制元素的缩小比例,
    					flex-shrink: 0;
    					font-size: 16px;
    					color: #333333;
    					padding: 0 10px;
    
    					&.active {
    						color: $mk-base-color;
    					}
    				}
    			}
    		}
    
    		.tab-icon {
    			position: relative;
    			display: flex;
    			// 水平居中
    			justify-content: center;
    			// 垂直居中
    			align-items: center;
    			width: 45px;
    
    			// 伪类
    			&::after {
    				content: '';
    				position: absolute;
    				top: 12px;
    				bottom: 12px;
    				left: 0;
    				width: 1px;
    				background-color: #ddd;
    			}
    		}
    	}
    </style>

使用

<tab :list='labelList' @tab='tab'></tab>
    
    		onLoad() {
    			this.getLabel()
    		},
    		methods: {
    			getLabel() {
    				this.$api.getLabel().then(res => {
    					this.labelList = res.data
    				})
    			},
    			tab({item,index}) {
    				console.log(item, index);
    			}
    		}

[20210620130001919.png]: /images/20221005/8347f8c1de1e42138bc7f375a339df3d.png