# ListTab 选项卡列表 1.0.9

用于选项卡切换的内容展示场景,可结合 <n-list><n-tabbar><n-page> 等需切换的组件组件使用效果更佳

# 基本使用

通过 <n-list-tab> 形式调用,使用多个布局组件展示其功能效果。

<template>
	<n-page>
		<n-list-tab slot="body" :num="list.length" :current="current">
			<n-list slot="0">
				<!-- 下标为0的内容区域 -->
				<n-cell>
					<n-text text="首页" />
				</n-cell>
			</n-list>
			<n-list slot="1">
				<!-- 下标为1的内容区域 -->
				<n-cell>
					<n-text text="购物车" />
				</n-cell>
			</n-list>
			<n-list slot="2">
				<!-- 下标为2的内容区域 -->
				<n-cell>
					<n-text text="我的" />
				</n-cell>
			</n-list>
		</n-list-tab>
		<view slot="footer">
			<n-tabbar :list="list" @change="tabbarChange"></n-tabbar>
		</view>
	</n-page>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					"count": 0,
					"isDot": true,
					"iconPath": "https://dnvue.dengqichang.cn/file/imgs/tabbar/index.png",
					"selectedIconPath": "https://dnvue.dengqichang.cn/file/imgs/tabbar/indexs.png",
					"text": "首页"
				}, {
					"count": 2,
					"isDot": false,
					"iconPath": "https://dnvue.dengqichang.cn/file/imgs/tabbar/shopping.png",
					"selectedIconPath": "https://dnvue.dengqichang.cn/file/imgs/tabbar/shoppings.png",
					"text": "购物车"
				}, {
					"count": 0,
					"isDot": false,
					"iconPath": "https://dnvue.dengqichang.cn/file/imgs/tabbar/my.png",
					"selectedIconPath": "https://dnvue.dengqichang.cn/file/imgs/tabbar/mys.png",
					"text": "我的"
				}],
				current: 0
			}
		},
		methods: {
			//切换自定义tabbar
			tabbarChange(e) {
				this.current = e.index;
			}
		}
	}
</script>

<style>

</style>

# API

# Attribute 参数

参数 说明 类型 可选值 默认值
num 选项卡个数 Number, String - 1
current 控制当前显示的选项卡 Number, String - 0