切换导航

组件介绍

ux-switch-navigation 切换导航组件可以快速帮您实现多种形式的切换导航，是一个非常常用、好用的组件;

运行图示

组件属性

属性名称	类型	默认值	作用
width	Number	690	组件宽度，单位 rpx，默认 690 rpx
isCenter	Boolean	false	是否居中布局
currentIndex	Number	0	激活项目的索引
size	Number	108	宽度单位 rpx，为 0 时代表自适应内容宽度
items	Array	UXNavItem[]	导航项目数据
activeLineClass	Array	['ux-bg-blue1']	激活条样式
activeLineHeight	String	6rpx	激活条高度
activeLineWidth	String	36rpx	激活条宽度
activeLineRadius	String	0rpx	激活条圆角
activeDirection	String		激活条横向对齐模式，默认左 center:居中，flex-end:右
activeFontWeight	Number	700	激活文本加粗属性 : 700 / 900 代表加粗 400 代表普通
titleClass	Array	['gui-primary-text']	导航文本样式
titleActiveClass	Array	['gui-primary-text']	导航文本激活样式
margin	Number	0	右侧间距单位 rpx
textAlign	String	left	文本布局方式
lineHeight	String	50rpx	文本行高
fontSize	String	28rpx	文本大小
activeFontSize	String	28rpx	激活项目文本大小
padding	String	0rpx	横向内间距
animatie	Boolean	true	切换时使用使用动画 [ nvue 暂不支持动画效果 ]
scorllAnimation	Boolean	true	是否产生滚动动画
tipsStyle	String	background-color:#FF0000; color:#FFFFFF; font-size:22rpx	提示信息样式

组件事件

@change 点击导航进行切换时触发，传递对应的索引值；

项目数据

组件项目数据为数组格式：

[
    new UXNavItem(0, '全部', 0),
    new UXNavItem(1, '***', 0),
]

UXNavItem 类已经定义在 \uni_modules\unix-ui\uxts\classes.uts，使用时请使用 import 导入。

示代码

<template>
	<view>
		<text class="ux-h6 ux-color-grey ux-mt-large ux-body">默认属性</text>
		<view class="ux-demo ux-body">
			<ux-switch-navigation 
			:items="navItems1" 
			@change="navChange"></ux-switch-navigation>
		</view>
		<text class="ux-h6 ux-color-grey ux-mt-large ux-body">居中模式</text>
		<view class="ux-demo ux-body">
			<ux-switch-navigation 
			:items="navItems2" 
			:isCenter="true" 
			activeDirection="center" 
			textAlign="center" 
			@change="navChange"></ux-switch-navigation>
		</view>
		<text class="ux-h6 ux-color-grey ux-mt-large ux-body">自动宽度</text>
		<view class="ux-demo ux-body">
			<ux-switch-navigation 
			:items="navItems3" 
			textAlign="center" 
			:isCenter="true" 
			activeDirection="center" 
			:size="0" 
			:margin="20" 
			padding="20rpx" 
			activeLineHeight="4rpx" 
			@change="navChange"></ux-switch-navigation>
		</view>
	</view>
</template>
<script lang="uts">
import {UXNavItem} from "@/uni_modules/unix-ui/uxts/classes.uts";
export default {
	data() {
		return {
			navItems1 : [
				new UXNavItem(0, '全部', 0),
				new UXNavItem(1, '新闻', 8),
				new UXNavItem(2, '体育', 0),
				new UXNavItem(3, '音乐', 0),
				new UXNavItem(4, '编程', 1),
				new UXNavItem(5, '推荐', 0),
				new UXNavItem(6, '购物', 0),
				new UXNavItem(7, '影视', 0),
				new UXNavItem(8, '社区', 0),
			] as UXNavItem[],
			navItems2 : [
				new UXNavItem(0, '全部', 0),
				new UXNavItem(1, '新闻', 0),
				new UXNavItem(2, '体育', 0),
			] as UXNavItem[],
			navItems3 : [
				new UXNavItem(0, '四个字符', 0),
				new UXNavItem(1, '三个字', 0),
				new UXNavItem(2, '五个字标签', 0),
			] as UXNavItem[]
		}
	},
	methods: {
		navChange : function(index:number){
			console.log(index);
		}
	}
}
</script>
<style scoped>
</style>