【Uni-App】底部栏踩坑
一、Page.json一定要注册这个页面
Uni-App通过page.json找到,解析不到这个页面文件是没用的
二、配置tabBar属性
"tabBar":{
"color":"#bfbfbf",//未选中时的自提颜色
"selectedColor":"#515151", //选中时的
"borderStyle":"black", //tabbar顶部边框颜色 支持black/whit
"backgroundColor" : "#FFFFFF",
"list":[
{
"pagePath":"pages/index/index",
"text":"首页",// tabbar的按钮文字
"iconPath":"./static/logo.png",
"selectedIconPath":"static/logo.png"
},
{
"pagePath":"pages/tabBar/msgTip/msgTip",
"text":"消息提醒",
"iconPath":"./static/logo.png",
"selectedIconPath":"static/logo.png"
},
{
"pagePath":"pages/tabBar/myInfo/myInfo",
"text":"我的",
"iconPath":"./static/logo.png",
"selectedIconPath":"static/logo.png"
}
]
}
被tabBar注册的页面,页面下面都会有这个底部栏存在



三、跳转到底部栏页面只能使用switchTab的方式
1、使用组件navigate标签要设置open-type=“switchTab”
2、使用method方法,用uni.switchTab()方法跳转
四、预览效果问题
由于更改的是page.json,热部署会失效,一定要重编译查看效果
【Uni-App】底部栏踩坑的更多相关文章
- web APP 开发之踩坑手记
屏蔽输入框怪异的内阴影 -webkit-appearance:none 禁止自动识别电话和邮箱 <meta content="telephone=no" name=" ...
- vue.js 踩坑第一步 利用vue-cli vue-router搭建一个带有底部导航栏移动前端项目
vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述,主要参考WiseWrong 的 Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 2.项目呈现效果 项目呈现网址:w ...
- 我的微信小程序入门踩坑之旅
前言 更好的阅读体验请:我的微信小程序入门踩坑之旅 小程序出来也有一段日子了,刚出来时也留意了一下.不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做.这星期一,赶紧趁着这股热乎劲,也不是 ...
- [置顶]
xamarin android toolbar(踩坑完全入门详解)
网上关于toolbar的教程有很多,很多新手,在使用toolbar的时候踩坑实在太多了,不好好总结一下,实在浪费.如果你想学习toolbar,你肯定会去去搜索androd toolbar,既然你能看到 ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- react-router 踩坑记
react-router踩坑分享 背景 辛苦历程 JavaScript动态修改 第一次尝试 第二次尝试 第三次尝试 第四次尝试 总结步骤 其他方案 原理 History 常见的3种History Br ...
- 利用vue-router和compoment重构代码--踩坑(一)
业务主要功能 获取所有的数据库列表 点击某一个数据库列表的时候,右侧分页展示数据 点击右侧某一条数据的时候,现实数据详情 以下是之前的页面,存在以下问题: 前段开发没有工程化(webpack) 主要功 ...
- C# -- HttpWebRequest 和 HttpWebResponse 的使用 C#编写扫雷游戏 使用IIS调试ASP.NET网站程序 WCF入门教程 ASP.Net Core开发(踩坑)指南 ASP.Net Core Razor+AdminLTE 小试牛刀 webservice创建、部署和调用 .net接收post请求并把数据转为字典格式
C# -- HttpWebRequest 和 HttpWebResponse 的使用 C# -- HttpWebRequest 和 HttpWebResponse 的使用 结合使用HttpWebReq ...
- apicloud踩坑集锦
最近在用apicloud开发,这里录入一些踩坑的地方,从头到尾,要多尴尬有多尴尬,新入app开发,记录一些心得,和遇到的坑以及解决办法. 1,apicloud 打包的Android app ,打开fr ...
- mui初级入门教程(二)— html5+ webview 底部栏用法详解
文章来源:小青年原创发布时间:2016-05-19关键词:mui,html5+,webview转载需标注本文原始地址: http://zhaomenghuan.github.io/#!/blog/20 ...
随机推荐
- while适用于不确定循环次数
// 当前有一个随机数,是生成100-999的随机数值 // 需要生成数值666,需要知道循环了多少次,才生成的666这个数值 // 我们可以通过循环来实现 ...
- 大量索引场景下 Easysearch 和 Elasticsearch 的吞吐量差异
最近有客户在使用 Elasticsearch 搜索服务时发现集群有掉节点,并且有 master 收集节点信息超时的日志,节点的负载也很高,不只是 data 节点,master 和协调节点的 cpu 使 ...
- 夜莺监控发布 v6.7 版本,推送部分商业版功能
熟悉夜莺的小伙伴都知道夜莺分为开源版.专业版.企业版,三个版本良性发展.近期夜莺团队发布了 v6.7 版本,把机器Metadata管理功能推送到了开源版,下面是该功能的简单介绍. 如上图,机器列表页面 ...
- JavaScript防抖与节流笔记
JavaScript防抖与节流 概念 防抖(debounce)与节流(throttle)是两个相似但有本质区别的两个概念,但两个概念的存在都是为了控制在特定条件下函数最大的执行次数.这在例如将函数执行 ...
- golang sync.Map 与使用普通的 map 的区别
使用sync.Map与普通的Go map主要有以下几点区别: 1. 并发安全性 普通map: 在没有外部同步的情况下,不是并发安全的.在多goroutine访问时,如果没有适当的锁或其他同步机制保护, ...
- Python数据类型(数字,字符串,[列表],(元组),{字典:字典值},{列表,列表2})
Python数据类型(数字,字符串,[列表],(元组),{字典:字典值},{列表,列表2}) # 1. # Python3 数字(Number) # Python 数字数据类型用于存储数值. # 数据 ...
- Java与React轻松导出Excel/PDF数据
前言 在B/S架构中,服务端导出是一种高效的方式.它将导出的逻辑放在服务端,前端仅需发起请求即可.通过在服务端完成导出后,前端再下载文件完成整个导出过程.服务端导出具有许多优点,如数据安全.适用于大规 ...
- Spring Boot入门实验
一. 实验目的和要求 1.掌握使用 IDEA 通过 Maven 和 Spring Initializr 的方式创建 Spring Boot 应用程序: 2.掌握 Maven 的工作原理: 3.了解 s ...
- PetaLinux常用命令汇总
创建petalinux工程 Create a new project from a reference BSP file. 用于从官方下载的BSP中抽取数据产生工程. petalinux-create ...
- Linux系统的硬件信息
查看Linux系统的硬件信息 [1]查看内核信息 uname 用于显示系统的内核信息 option -s:显示内核名称 -r:显示内核版本 [root@bogon /]# uname -a Linux ...