导航栏 NavBar

qt-nav-bar是由qt-list-view而实现的导航栏组件。

基础用法

点击查看源码

TypeScript

<script lang="ts">
import {defineComponent, ref} from 'vue';
import {
	QTINavBar,
	QTNavBar,
	QTNavBarItemType,
	QTNavBarItem,
} from '@quicktvui/quicktvui3';

export default defineComponent({
	setup() {
		// ...
		const navBar = ref<QTINavBar>();
		let horizontalItemList: Array<QTNavBarItem> = [];
		for (let i = 0; i < 10; i++) {
			let tabItem: QTNavBarItem = {
				type: QTNavBarItemType.QT_NAV_BAR_ITEM_TYPE_TEXT,
				text: 'Tab:' + i,
				titleSize: 20,
				decoration: {
					left: 40,
					right: 20,
				},
			};
			horizontalItemList.push(tabItem);
		}

		const horizontalNavBar: QTNavBar = {
			data: horizontalItemList,
		};

		navBar.value?.init(horizontalNavBar);

		//导航切换时的回调，当前选中导航的info(e)
		const onTabSelect = () => void 0;

		return {
			onTabSelect,
		};
	},
});
</script>
<style lang="css" scoped>
.qt-image {
	width: 260px;
	height: 320px;
}
</style>
<template>
	<!-- horizontal: 是否横向   :item-gap： 间距-->
	<qt-nav-bar
		ref="navBar"
		:item-gap="10"
		@tab-select="onTabSelect"
	></qt-nav-bar>
</template>