uView Plus Vue3 ： （ VIP Plus 付费版 ）

# CateTab 垂直TAB

注意

  1. tabList指定tab列表。
  2. tabKeyName和itemKeyName指定对象的key。

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ √ √ √

# 基本使用

tabList指定tab列表，tabKeyName和itemKeyName指定对象的key。


<template>
	<view>
        <view style="height: 138px;background: #f1f1f1;"></view>
		<up-cate-tab class="cate-tab" :tabList="tabList" tabKeyName="title" itemKeyName="title">
            <template #pageItem="{pageItem}">
                <view class="w-full">
                    <up-cell-group :border='false'>
                        <up-cell :border='false'>
                            <template #icon>
                                <up-image :src="pageItem.cover" width="100px" height="100px"></up-image>
                            </template>
                            <template v-slot:title>
                                <view>
                                    {{ pageItem.title }}
                                </view>
                            </template>
                            <template v-slot:label>
                                <view class="h-100 pt-1">
                                    <text class="text-md text-red">￥{{ pageItem.price }}</text>
                                </view>
                            </template>
                            <template v-slot:value>
                                <up-number-box></up-number-box>
                            </template>
                        </up-cell>
                    </up-cell-group>
                </view>
            </template>
        </up-cate-tab>
	</view>
</template>


<script>
export default {
	data() {
		return {
			list: [  
                { title: '选项一',  children: [
                    {title: '水煮肉片', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 88}
                    ]
                },  
                { title: '选项一',  children: [
                    {title: '酸菜鱼', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 99}
                    ]
                },
                { title: '选项一',  children: [
                    {title: '水煮肉片', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 88}
                    ]
                },  
                { title: '选项一',  children: [
                    {title: '酸菜鱼', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 99}
                    ]
                },
                ]
		};
	},
	methods: {
	}
};
</script>

<style lang='scss' scoped>
.cate-tab {
    height: calc(100vh - 150px);
    /* #ifdef H5 */
    height: calc(100vh - 150px - var(--window-top));
    /* #endif */
}
</style>


✅ Copy success!

# API

# Props

属性名 说明 类型 默认值 可选值 平台差异说明
current3.3.73 当前Tab索引，支持v-model:current Boolean true false -
tabList tab列表 Array normal large / mini -
tabKeyName tab切换key名称 String square circle -
itemKeyName 内容key名称 Boolean false true -

# Slots

属性名 说明 备注
tabItem 自定义左侧侧TAB切换 scope={item}
getphonenumber open-type="getPhoneNumber"时有效

← 商品列表1 →