uview-plus

# CateTab 垂直TAB

常用于电商/外卖/商超等商品分类

# 平台差异说明

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

# 基本使用

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

<style lang='scss' scoped>
.cate-tab {
    height: calc(100vh - 150px);
    /* #ifdef H5 */
    height: calc(100vh - 150px - var(--window-top));
    /* #endif */
}
</style>
<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 setup>
import { ref, onMounted } from 'vue';  
  
// 响应式数据  
const tabList = ref([  
  { 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}
    ]
  },
]);
</script>

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

# 右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码


 github  gitee

# API

# Props

注意：props中没有控制组件弹出与收起的参数，因为这是通过show绑定变量实现的，见上方说明。

参数 说明 类型 默认值 可选值
tabList tab列表 Array -
tabKeyName tab切换key名称 String name
itemKeyName 内容key名称 String name

# Slots

名称 说明
tabItem 自定义左侧侧TAB切换 scope={item}
pageItem 自定义右侧TAB内容区域 scope={pageItem}

# Event

事件名 说明 回调参数 版本

← FloatButton 悬浮按钮 →