uni-app项目配置手机端底部的tab栏（一）

一般我们在开发手机应用的时候都会有手机底部的tab导航栏，然而我们在使用uni-app开发的时候，我们可以直接在项目中配置tab即可，非常的方便。

1、创建项目

我们用uni-app官方提供的HBuilder X工具来创建项目，可在官网上下载HBuilder X工具，

下载好之后，不需要安装，直接运行即可。我们找到文件进行创建项目：

创建完项目，我们可以在谷歌浏览器中运行：

这里面提供了好几个平台运行，都可以运行的。

2、配置tab栏

以下是官网给出的规定：

当设置 position 为 top 时，将不会显示 icon
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。
顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。

在项目中有一个pages.json文件，打开这个文件，在里面配置tabbar

"tabBar": {"color": "#bfbfbf","selectedColor": "#515151","borderStyle":"black","backgroundColor":"#ffffff","list": [{"pagePath":"pages/index/index", //页面路径"text":"首页",                   //tab字体显示"iconPath":"static/tabBarIco/index.png", //未选中tab图标路径"selectedIconPath":"static/tabBarIco/index_sel.png"  //选中tab图标路径},{"pagePath":"pages/search/search","text":"搜索","iconPath":"static/tabBarIco/search.png","selectedIconPath":"static/tabBarIco/search_sel.png"},{"pagePath":"pages/me/me","text":"我的","iconPath":"static/tabBarIco/me.png","selectedIconPath":"static/tabBarIco/me_sel.png"}]}

以上就是配置uni-app项目的手机端tab栏。

想要获取更多的学习资料和学习交流，请关注微信公众号：码上言，谢谢大家的支持！

uni-app项目配置手机端底部的tab栏（一）相关推荐

php手机网站底部导航代码,jQuery微信手机端底部弹出导航菜单列表代码
jQuery微信手机端底部弹出导航菜单列表代码 jQuery微信手机端底部弹出导航菜单列表代码是一款网页底部点击按钮弹出浮动的图标菜单列表的手机特效. js代码 function showList() ...
app小程序手机端Python爬虫实战12实现自动化退出考研帮app并清空缓存
app小程序手机端Python爬虫实战11实现自动化退出考研帮app并清空缓存一.捕获安卓吐司的消息结束安卓的吐司操作: while True:if self.d.toast.get_messag ...
服务器挂了app端显示,手机端监控服务器进程app
手机端监控服务器进程app 内容精选换一换云游戏作为游戏行业的热门发展方向,通过视频流化的方式面向玩家提供免下载,脱离手机性能的一种游戏服务方式,其本身包含了PC游戏的流化和移动游戏的流化.云手机 ...
android手机最低内存,原神手机端需要哪些配置手机端最低配置要求介绍
原神是一款由米哈游自主研发的全新开放世界冒险游戏,游戏最近迎来了pc端的首次测试,而且在不久之后就会开启原神手机端的公测版本,那么手机端需要什么配置呢?小编带来了详细的介绍. 移动端预下载:9月25日 ...
Flask项目之手机端租房网站的实战开发（一）
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 项目源码下载一丶项目介绍产品:关于手机移动端的租房网站角色:在这个产品中用户包括房东与房客功能:房东可以在这个平台发布自己 ...
vue手机端底部导航栏
业务逻辑: 项目多个页面需用到底部导航栏,所以抽离出来,以组件的方式引入父组件. 方法一更新(2019年5月6日),关于底部导航栏的应用,还可以利用子组件和父组件的关系来绑定. 首先增加一个父组件文 ...
app小程序手机端Python爬虫开发00-课程介绍
课程导学本次课程我们将会讲解从移动端app数据抓取到数据存储的完整实战流程.通过这门课我们会学习到课程技术点 1.学会uiautomator2对移动设备进行操控没有移动真实的手机没有关系,本套课 ...
Java学习之App开发公司手机端设想
背景:最近在学JAVA,看到JAVA做各种APP,而公司软件主要是做家居设计,使用者多是设计师和家具门店,很难让大部分非专业人士接触到我们的产品,由于设计复杂且占用资源较多不太可能用APP实现网站设计 ...
手机访问PHP如何配置,配置手机端和电脑端访问不同页面的通用方法(以thinkphp5为例)...
将以下代码放在入口文件public/index.php目录下面即可实现 //判断是否是手机 function is_mobile() { $user_agent = $_SERVER['HTTP_US ...