WP二开

uni-app制作app底部导航栏

银戒 · 4月1日 · 2019年 · · · 944次已读

引言

本教程为《教你用WordPress开发app(小程序)-包含所有源代码》系列教程之一。

本教程后续更新会放在:清空网络科技工作室官网

前面已经顺利开发出了首页,但是首页的功能并没有完,比如首页还需要有下拉刷新、上拉加载什么的功能,这个就等到后期完善了。

一个app肯定不止有首页的,还需要很多其他主页面,比如说发现、用户中心等等,所以我们需要在app中加一个底部导航,用了切换到其他主界面,本小节就将为你讲解如何在uni-app中加入底部导航栏。

开始

其实在uni-app中加入底部导航栏跟小程序是类似的,因为uni-app要做到一端开发,全端使用,其中最重要的就是遵守了小程序的规则。所以大家在开发此项功能的时候可以看看小程序的官方文档。(点此直达

打开pages.json文件如下:

添加代码如下:

"tabBar": {
		"color": "#383838", //tab 上的文字默认颜色,仅支持十六进制颜色
		"selectedColor": "#000000", //tab 上的文字选中时的颜色,仅支持十六进制颜色
		"borderStyle": "white", //tabbar上边框的颜色, 仅支持 black / white
		"backgroundColor": "#ffffff", //tab 的背景色,仅支持十六进制颜色
		"list": [{
			"pagePath": "pages/index/index",
			"text": "首页"
		}]
	},

此配置界面完整代码如下:

{
     "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
         {
             "path": "pages/index/index", //首页文件路径
             "style": {
                 "navigationBarTitleText": "首页" //首页头部标题
             }
         }
     ],
     // 教程uni-app制作app底部导航栏
     "tabBar": {
         "color": "#383838", //tab 上的文字默认颜色,仅支持十六进制颜色
         "selectedColor": "#000000", //tab 上的文字选中时的颜色,仅支持十六进制颜色
         "borderStyle": "white", //tabbar上边框的颜色, 仅支持 black / white
         "backgroundColor": "#ffffff", //tab 的背景色,仅支持十六进制颜色
         "list": [{
             "pagePath": "pages/index/index",
             "text": "首页"
         }]
     },
     "globalStyle": {
         "navigationBarTextStyle": "white", //导航栏标题颜色(仅支持 black/white)
         "navigationBarTitleText": "WPApp", //导航栏默认标题
         "navigationBarBackgroundColor": "#000000;", //导航栏背景颜色,此处为黑色
         "backgroundColor": "#F8F8F8" //页面背景颜色
     }
 }

好了现在你打开app就会有一个底部导航了,需要说明的是,导航栏上是可以添加字体图标的,但因为时间和精力的关系我没有加上,大家可以自行添加,只要你看了上面的文档,这并不是什么难事。

结束

因为我们现在只有一个页面所以这里就只添加了一个选项,在下一节中我将创建发现页面并添加上发现页面的选项。

代码仓库: https://github.com/sliverRing/uniApp-WPApp

2 条回应
  1. 妈妈易妈妈网2019-4-1 · 10:00

    隔三差五来一趟,每次都有新气象!

  2. 你的灵兽看起来很好吃2019-4-3 · 0:55

    虽然不知道说的是什么,但看起来好厉害的样子!