自定义底部导航

自定义底部导航概述

自定义底部导航的实现原理是利用 fixed 定位将导航主体定位在页面底部，然后在主体内部自由地实现自定义底部导航布局。

我们为大家提供了 ux-footer-bar 组件，可以快速实现自定义底部布局。

ux-footer-bar 组件属性

属性	类型	默认值	作用
height	Number	100	组件高度，单位 rpx
zIndex	Number	999	组件 z-index 值
space	Boolean	true	是否产生一个与组件同高的占位元素
bottom	String	0rpx	组件 bottom 值

运行图示

演示代码

<template>
	<view class="ux-body ux-page-color ux-flex1">
		<text class="ux-h6 ux-color-grey ux-mt-large">自定义底部导航</text>
		<view class="ux-demo ux-mt-large ux-flex1 ux-flex ux-column ux-justify-content-center">
			<text class="ux-h2 ux-color-grey3 ux-text-center">{{footerBars[currentPageIndex].label}}</text>
		</view>
		<view style="height:30rpx;"></view>
		<ux-footer-bar
		:height="110">
			<view 
			style="padding:5rpx 0;"
			class="ux-bg-white ux-grid ux-nowrap ux-space-between ux-align-items-center ux-border-t">
				<view 
				v-for="(item, index) in footerBars" 
				class="ux-grid-item" 
				hover-class="ux-tap" 
				@tap="footerBarChange(index)">
					<text 
					class="ux-grid-icon ux-icons" 
					:class="[currentPageIndex == index?'ux-color-primary':'ux-color-grey2']">{{item.icon}}</text>
					<text 
					class="ux-grid-text ux-icons" 
					:class="[currentPageIndex == index?'ux-color-primary':'ux-color-grey2']">{{item.label}}</text>
				</view>
			</view>
		</ux-footer-bar>
	</view>
</template>
<script lang="uts">
type footerBarItem = {
	icon:string,
	label:string
};
export default {
	data() {
		return {
			// 当前索引
			currentPageIndex:0,
			// 导航项目
			footerBars : [
				{
					icon:"\ue655",
					label:"首页"
				},
				{
					icon:"\ue6ac",
					label:"新闻"
				},
				{
					icon:"\ue7fa",
					label:"视频"
				},
				{
					icon:"\ue611",
					label:"好友"
				},
				{
					icon:"\ue60d",
					label:"账户"
				}
			] as footerBarItem[]
		}
	},
	methods: {
		footerBarChange:function(index:number){
			this.currentPageIndex = index;
		}
	}
}
</script>
<style scoped>
.ux-grid-item{width:20%;}
.ux-grid-icon{height:65rpx; font-size:46rpx; line-height:65rpx; overflow:hidden;}
.ux-grid-text{font-size:25rpx; line-height:35rpx; margin-top:0;}
</style>