uni-app 第二讲首页底部导航功能实现

上一讲我们讲解了如何使用uni-app实现登录功能。今天继续为大家分段讲解一下登录之后如何实现首页底部导航功能。

uni-app 第二讲首页底部导航功能实现_第1张图片

uni-app 第二讲首页底部导航功能实现_第2张图片

这里只是简单的做了一个首页底部导航功能,具体页面内容就需要大家根据实际情况自己添加了。

这里先大致讲一下实现过程

这里关键点就在于pages.json配置文件里面。

其中pages数组中的第一项就是表示我们的启动项。参考:https://uniapp.dcloud.io/collocation/pages

今天重点要用到的地方就是tabBar。

uni-app 第二讲首页底部导航功能实现_第3张图片 

可以清楚地看到tabbar是一个list数组。

 uni-app 第二讲首页底部导航功能实现_第4张图片

下面开始实现功能

首先我们需要创建两个页面,首页和我的,里面只需要写一个文字就行

 uni-app 第二讲首页底部导航功能实现_第5张图片

uni-app 第二讲首页底部导航功能实现_第6张图片

第二步配置pages中的tabbar就可以了

"list":[{
			"pagePath": "pages/one/one",
			"text": "首页",
			"iconPath": "static/img/home.png",
			"selectedIconPath": "static/img/homeHL.png"
		},
		{
			"pagePath": "pages/two/two",
			"text": "我的",
			"iconPath": "static/img/user.png",
			"selectedIconPath": "static/img/userHL.png"
		}]

还有一个比较重要的点,就是所有页面都必须在pages数组中声明

uni-app 第二讲首页底部导航功能实现_第7张图片

 末尾给大家说一件事,我的每篇博客都是附代码的,可以帮助大家快速理解。

大致上就是这些,是不是很简单,其实编程并不难,难得是自己觉得难。

附demo下载地址

你可能感兴趣的:(uni-app,移动开发)