一、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】底部栏踩坑的更多相关文章

  1. web APP 开发之踩坑手记

    屏蔽输入框怪异的内阴影 -webkit-appearance:none 禁止自动识别电话和邮箱 <meta content="telephone=no" name=" ...

  2. vue.js 踩坑第一步 利用vue-cli vue-router搭建一个带有底部导航栏移动前端项目

    vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述,主要参考WiseWrong 的 Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 2.项目呈现效果 项目呈现网址:w ...

  3. 我的微信小程序入门踩坑之旅

    前言 更好的阅读体验请:我的微信小程序入门踩坑之旅 小程序出来也有一段日子了,刚出来时也留意了一下.不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做.这星期一,赶紧趁着这股热乎劲,也不是 ...

  4. [置顶] xamarin android toolbar(踩坑完全入门详解)

    网上关于toolbar的教程有很多,很多新手,在使用toolbar的时候踩坑实在太多了,不好好总结一下,实在浪费.如果你想学习toolbar,你肯定会去去搜索androd toolbar,既然你能看到 ...

  5. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  6. react-router 踩坑记

    react-router踩坑分享 背景 辛苦历程 JavaScript动态修改 第一次尝试 第二次尝试 第三次尝试 第四次尝试 总结步骤 其他方案 原理 History 常见的3种History Br ...

  7. 利用vue-router和compoment重构代码--踩坑(一)

    业务主要功能 获取所有的数据库列表 点击某一个数据库列表的时候,右侧分页展示数据 点击右侧某一条数据的时候,现实数据详情 以下是之前的页面,存在以下问题: 前段开发没有工程化(webpack) 主要功 ...

  8. 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 ...

  9. apicloud踩坑集锦

    最近在用apicloud开发,这里录入一些踩坑的地方,从头到尾,要多尴尬有多尴尬,新入app开发,记录一些心得,和遇到的坑以及解决办法. 1,apicloud 打包的Android app ,打开fr ...

  10. mui初级入门教程(二)— html5+ webview 底部栏用法详解

    文章来源:小青年原创发布时间:2016-05-19关键词:mui,html5+,webview转载需标注本文原始地址: http://zhaomenghuan.github.io/#!/blog/20 ...

随机推荐

  1. 修改linux默认启动界面——从命令行模式转换为图形化模式

    从命令行模式转换为图形化模式 首先需要安装对应的图形化安装包 yum groupinstall "GNOME Desktop" "Graphical Administra ...

  2. SQL练习之打卡记录数据统计类问题

    最近老婆的公司,关闭了OA系统中,各类打卡时间数据统计的功能,为了不麻烦老婆手算,就做了一个简单的打卡系统,方便自动统计老婆想要知道的各类数据. 做的过程中就遇到了几个还挺有意思的SQL,这里写成一篇 ...

  3. ETL工具-nifi干货系列 第七讲 处理器JoltTransformJSON(续)

    第六讲教程只简单介绍了Jolt的chain转换模式,本节课介绍下Jolt的各种转换模式. 点击的处理器JoltTransformJSON高级配置选项,进行测试Jolt的转换模式. 1.Cardinal ...

  4. LidarView工程搭建指南

    前言 笔者做过一段时间的车载LiDAR开发,对LidarView开源项目进行过深度定制,摸索了一套LidarView软件的开发和调试方法 1 软件安装 1.1 安装准备 以Windows10系统平台为 ...

  5. 状态模式(Sate Pattern)

    一.模式动机 状态模式(State Pattern)是一种较为复杂的行为型模式.它用于解决系统中复杂对象的状态转换以及不同状态下行为的封装问题.当系统中某个对象存在多个状态,这些状态之间可以进行转换, ...

  6. 开启PHP-GD库

    话不多说,上教程 环境 CentOS7 1. 安装php-gd yum install php-gd 2. 定位gd.so位置 rpm -qal | grep gd.so #第一行即是 3. 定位配置 ...

  7. 记录一次 OpenStack 集群在创建虚机后无法获取 IP 的问题

    现象 所有的组件状态都是正常工作的,DHCP 服务正常工作,在个个虚拟网络设备端口抓包,发现 OpenVSwitch 上 DHCP 包可以通行,虚机获取 DHCP Discover 请求可以正常发出, ...

  8. post基础错误注入

    Burpsuite抓取HTTP请求 Burpsuite是一款Web安全测试的利器,集成了几乎Web安全测试中所有需要用到的功能. 运行前提: 需要安装Java https://www.java.com ...

  9. IPv6地址的文本表示规范

    背景 随着IPv6越来越普及,经常要跟IPv6地址打交道,迫切需要一个统一的IPv6地址文本表示规范. RFC4291简单的说明了如何将IPv6地址表示成文本形式,但有很多有歧义和不周全的地方. RF ...

  10. C# 时间戳与 标准时间互转

    C# 时间戳与 标准时间的转其实不难,但需要注意下,基准时间的问题. 格林威治时间起点: 1970 年 1 月 1 日的 00:00:00.000 北京时间起点:1970 年 1 月 1 日的 08: ...