n-tabs 选项卡

选项卡，涉及到n-tabs、n-tabs-header、n-tabs-panel三个组件

平台兼容性

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

使用<n-tabs/>组件，指定图标对应的type属性，示例代码：

<n-tabs :list="list" v-model="currentTab">
	<n-tabs-panel>tabs1 content</n-tabs-panel>
	<n-tabs-panel>tabs2 content</n-tabs-panel>
</n-tabs>

export default{
	data(){
		return{
			list:[{text:'选项卡1'},{text:'选项卡2'}],
			currentTab:0
		}
	}
}

自定义标题

使用<n-tabs/>组件，指定图标对应的type属性，示例代码：

<n-tabs v-model="currentTab">
	<template #header>
		<!-- 必须要有这个原子view，否则会影响布局 -->
		<view class="n-flex-row n-flex-justify-around n-flex-1">
			<n-tabs-header :keyName="item.day" v-for="(item,index) in dateList" :key="index"
				:activeStyle="{'border-bottom':'2px solid'}">
				<template #header>
					<view class="n-flex-column n-text-center">
						<text>{{item.week}}</text>
						<text style="font-size: 20rpx;">{{item.day}}</text>
					</view>
				</template>
			</n-tabs-header>
		</view>
	</template>
	<!-- 也可以不要这个panel就没有选项内容，就需要调用@change或者@click事件，或者监听currentTab -->
	<n-tabs-panel :keyName="item.day" v-for="(item,index) in dateList" :key="index">
		{{item.day}}
	</n-tabs-panel>
</n-tabs>

<script>
	export default {
		data() {
			return {
				filter: {
					startDate: '',
					endDate: ''
				},
				currentTab: 0,
				dateList: [],
			}
		},
		watch: {
			currentTab(newValue, oldValue) {
				this.page()
			}
		},
		created() {
			let weekarr = ['日', '一', '二', '三', '四', '五', '六']
			for (let i = 0; i < 7; i++) {
				const date = new Date(Date.now() + i * 24 * 60 * 60 * 1000);
				const year = date.getFullYear();
				const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1;
				const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
				const week = date.getDay()
				this.dateList.push({
					week: i === 0 ? '今' : weekarr[week],
					day: `${date.getMonth() + 1}/${date.getDate()}`,
					value: `${year}/month/day`
				})
			}
		},
		methods: {
			page() {
				console.log(this.filter);
			}
		}
	}
</script>

API

属性

参数	说明	类型	默认值	可选值
type	图标名称，见示例图标集合	String	-	-
color	图标颜色	String	inherit	-
size	图标字体大小，单位rpx	String | Number	32rpx	-

事件

事件名	说明	回调参数	版本
click	点击图标时触发	-	-