【uniapp】uview 自定义 tabBar 底部导航栏

在 uview1.x 中,不用在 pages.json 里配置 tabBar 属性,比如要在首页配置自定义底部导航栏,就在对应组件中:

		<u-tabbar v-model="current" :list="list" :before-switch="beforeSwitch" inactive-color="#999999"
			active-color="#0D7EDB">
		u-tabbar>

常用的配置:
current :对应当前激活的图标;
list :导航栏列表;
before-switch :切换调用的钩子函数,参数对应下标;
inactive-color:未激活的文字颜色;
active-color:已激活的文字颜色;

配置菜单列表:

computed: {
		list() {
			const arr = [
				{
					selectedIconPath: '../../../../static/todo1.png',
					iconPath: '../../../../static/todo.png',
					text: "待办",
				},
				{
					selectedIconPath: '../../../../static/stage1.png',
					iconPath: '../../../../static/stage.png',
					text: "首页",
				},
			]
			return arr;
		}
	},

页面跳转:

beforeSwitch(index) {
			if (index === 0) {
				uni.navigateTo({
					url: '/pages/todo/todo'
				})
			} else {
				uni.navigateTo({
					url: '//pages/index/index'
				})
			}
		},

跳转到对应页面,也需要配置 u-tabbar

你可能感兴趣的:(uniapp,uni-app,uView,vue,html,javascript)