微信小程序内容页和首页可以用不一样的自定义导航栏吗

在一个微信小程序中想要用到两种不同的tabbar样式，需要在appjs中自定义，在页面加载时进行调用。

比如一个小程序需要两个版本（用户版、商家版），并且能通过一个按钮在两个版本间进行切换，可能会用到这种方式。

此处以两个页面（index，logs）显示两种tabbar样式为例，通过切换按钮进行切换。

番茄钟，是根据一个 瑞典人 所写的番茄工作法理论进行开发的一款方便、实用的日程管理软件。指的是把工作任务分解成半小时左右，集中精力工作25分钟后休息5分钟，如此视作种一个“番茄”，而“番茄工作法”的流程能使下一个30分钟更有动力。

a)开始界面的中央处有倒计时钟，分布在其下的为“工作”与“休息”的两个button，点下任一个button即可触发响应的倒计时进行计时工作。

b)在buttons下发有一个自动聚焦的input，在此处输入想要专注的任务，然后点击上方的button即可进行专注工作

c)最下方为tabBar，第一个对应的即为开始界面，第二个位记录界面，第三个为设置界面。选中图标会跳转到相应的界面同时图标会变成蓝色。

会显示“时间段+任务名“，时刻提醒自己做了些什么，底部正中央有个“清除记录”的选项，点击后会清空所有记录。

a)工作时长和休息时长可调，最上方有连个slider，华东即可进行调节

b)两个switch:一个控制倒计时的时候可以播放音乐，另外一个保证倒计时的时候屏幕不会熄灭。

a)统计界面，讲一天记录的时间按类别进行区分，并利用图表的形式进行表示

b)处理交互效果，增加触发事件的动画特性

c)美化界面，这个界面太简洁了，后续可能会增加自定义背景的功能，还会对当前的UI界面记性重构

d)音乐播放功能，会多增加几首音乐并实现可选项

发布了体验版本，邀请了即为好友进行了测试，发现线上版本出了很多bug。由于自己当时进行小程序开发的时候选择的样机为iPhone6，只对的大小进行了适配性设置，但是经朋友的安卓手机测试会出现以下bug:

界面标题没有居中、音乐无法播放(音乐播放我利用的是请求百度音乐，在以往程序都成功了，但是不知道这次为什么不行，是音乐的地址问题还是请求参数的问题还有待测试)、休息时长有时候不能正确显示(emm，我觉得这个逻辑是对的，难不成是小程序的一个bug)、开始界面的图标文字位置有些错乱(这个的确是个问题，我没又想到屏幕的大小的问题，不能仅仅指定图标和文字的大小，因为当前手机型号较多，如果利用margin-left来设置位置的话，肯定会有位置上的错误)

地址

设置导航栏

导航栏TabBar

如果我们的小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

Tip： 通过页面跳转（wxnavigateTo）或者页面重定向（wxredirectTo）所到达的页面，即使它是定义在 tabBar 配置中的页面，也不会显示底部的 tab 栏。

tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

属性值：

示例：

appjson：

运行：

微信小程序教程系列

相关连接：>

1用于实现多页面的快速切换。

2tabbar导航栏只能配置最少 2 个、最多 5 个 tab 页签。

3步骤：

① 通过 appjson 文件的 pages 节点，新建 对应的 tab 页面

② tabBar 节点中，新增 list 数组，这个数组中存放的，是每个 tab 项的配置对象

③ 在 list 数组中，新增每一个 tab 项的配置对象。对象中包含的属性如下：

-pagePath 指定当前 tab 对应的页面路径必填

-text 指定当前 tab 上按钮的文字必填

-iconPath 指定当前 tab 未选中时候的路径可选

-selectedIconPath 指定当前 tab 被选中后高亮的路径可选

使用组件：<navigator url=" / ">1</navigator>

使用api:wxnavigateTo({url:" / "})

第一步、桌面空白处单击鼠标右键，右键菜单中选择“个性化”。第二步、在“个性化”界面，点击左侧底部的“显示”。第三步、在随后d出的“显示”界面，找到“仅更改文本大小”，我们看到有三个设置项目。三个设置项目。 1、用于自定义设置项目，我们在这里可以选择标题栏、菜单、消息框、调色板标题、图标以及工具提示的项目。 2、用于自定义相关项目字体大小，字体从6磅至24磅，您可以随意选择。 3、第三个项目勾选后，字体会加粗显示。

关于自定义tabbar在跳转的时候，tabbar因为是跟页面的一起绑定，所以会跟随页面一起出现，不是像官方的tabbar一样一直待在页面上。这就是闪动的根本所在。

针对闪动看了一个demo，是让tabbar定义为一个页面，然后让你要显示的页面一组件的形式，插入到tabbar的页面，这样tabbar一直在一个页面上所以就不存在，tabbar跟随页面滚动也就是闪动问题。

2019-2-14，又纠结到这个问题上，使用自定义tabbar使用wxnavigateTo会出现页面栈充满，然后不会跳转问题，使用wxreLaunch等又会出现闪动太大不能接受问题，最后使用在主页面使用官方tabbar组件显示，其他页面需要tabbar的话使用自定义tabbar解决。

例子：>

以上就是关于微信小程序内容页和首页可以用不一样的自定义导航栏吗全部的内容，包括:微信小程序内容页和首页可以用不一样的自定义导航栏吗、微信番茄钟小程序、微信小程序开发，导航栏右边的按钮怎么设置等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！