微信小程序自定义tabbar，实现不同角色不同的tabbar

参照微信小程序官方文档， 自定义tabbar ，但该文档只是实现了自定义tabbar，没有实现不同角色不同的tabbar，且官方文档中的custom-bab-bar组件中的setData方法存在在真机上不能重新渲染的bug，可能是由于缓存造成的。

本项目仓库： customtabbar 。

主要是在tab的页面组件中调用getTabBar接口后再调用setData方法，从而实现了tabbar的重新渲染。

跳转至另外一个页面，不会把之前的页面销毁。但是带有返回箭头，点击可以返回到上一页，但是回到上一页的时候不会重新刷新这一页的数据。

跳转至tabbar页，当用户点击时，会跳转到相应的tabbar页面，只能跳转到tabbar页面，其他页面不支持。

跳转至另一界面，与wxnavigateTo()不同的是wxredirectTo()跳转后的页面没有返回箭头，如果需要返回需自定义返回按钮。wxredirectTo（）和wxnavigateTo()各有各的好处，wxredirectTo（）在使用自定义按钮返回上一层后之前页面会进行刷新，而wxnaviagteTo()会保留之前界面。可根据产品需求进行选择

关闭所有页面，打开到应用内的某个页面跟wxredirectTo 一样左上角不会出现返回箭头

返回的时候想要刷新数据，将方法放在onShow()方法里面。

首先，必须检讨自己，出现这种问题的确是自己阅读文档不仔细。

在学习页面之间传递参数时，同时设置了 tabBar 和点击跳转导航 wxnavigateTo ,并且两个设置跳转的页面路径一致，发现 wxnavigateTo 跳转是不生效的，至于想要传递的参数那就更别想传递到跳转的页面。

出现这个问题，我一开始以为是微信小程序自带的问题，但是想想，怎么可能呢，是猪吗，这么明显的问题，留给开发者？于是翻阅文档，研读 tabBar 和API中的导航一部分，发现文档早已注明的很清楚，只是自己没有看清楚，检讨自己并认真学习一下。

wxnavigateTo

wxredirectTo

wxswitchTab

wxreLaunch

1 wxnavigateTo 和 wxredirectTo 不允许跳转到 tabBar 页面，只能用 wxswitchTab 跳转到 tabBar 页面

2 wxnavigateTo 和 wxredirectTo 允许跳转时路径带参数， wxswitchTab 跳转时路径不可带参数

为了不让用户在使用小程序时造成困扰，微信小程序规定页面路径只能是 五层 ，所以需尽量避免多层级的交互方式。 而页面跳转则涉及到多个页面层级。

保留当前页面，跳转到应用内的某个页面，使用wxnavigateBack可以返回到原页面。

需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用分隔，参数键与参数值用=相连，不同参数用&分隔；

如 'pathkey=value&key2=value2'

eg:

wxnavigateTo({

    url:'testid=1'

})

这种跳转方式默认有返回按钮，返回到上一个页面

关闭当前页面，跳转到应用内的某个页面。

需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。参数与路径之间使用分隔，参数键与参数值用=相连，不同参数用&分隔；

如 'pathkey=value&key2=value2'

eg:

wxredirectTo({

    url:'testid=1'

})

这种跳转方式默认有返回按钮，返回到上一个页面的再上一层

需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用分隔，参数键与参数值用=相连，不同参数用&分隔；

如 'pathkey=value&key2=value2'，如果跳转的页面路径是 tabBar 页面则不能带参数

eg:

wxreLaunch({

    url:'testid=1'

})

这种跳转方式默认没有返回按钮，不需要默认返回按钮的页面就可以使用这个api了

需要跳转的 tabBar 页面的路径（需在 appjson 的  tabBar  字段定义的页面），路径后不能带参数

{

    "tabBar": {

        "list": [{

            "pagePath":"index",

            "text":"首页"

        },{

            "pagePath":"other",

            "text":"其他"

        }]

    }

}

wxswitchTab({

url:'/index'

})

我们需要调转到tabbar定义的页面的时候，就需要这个api了。踩过这个坑的人就知道，除了这个api，其他的都不能跳转到tabar定义过的页面

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。

项目的需求是: 根据后台返回的配色信息,前端根据返回配色信息进行配色全局引用到小程序

百度和Google查了一番,都只查到用添加类的方式,但是不满足需求,因为类里面的颜色都是写死的,我是想要样式动态,最后无奈想到全局变量的方式解决切换主题

具体实现:(在appjs文件中将小程序主题加载完成)

改变tabbar(我这里只改的图标颜色,如需改变背景色,可添加修改背景样式进行修改)

页面实现改变主题色:

组件中实现改变主题色:(大致都是一样的处理方式)

总结: 这种方法虽可以改变主题,但是也是有缺陷,比如每个页面去添加行内样式和每个页面去改变导航栏主题色,都是比较繁琐和麻烦的,而且页面改变导航栏主题色的时候,会有瞬间闪屏(真机上展示效果比编辑器好多了,所以闪屏问题还算能接受),但最后实现了项目需求,也还不错如你有更好的的方式方法,请留言告知,相互学习才能更快进步

首页小程序导航栏TabBar设置

1、注意区分属性值大小写的区别，比如selectedIconPath如果写成selectediconpath则不显示。

2、如果tabBar中设置"postion":"top"则icopath的都不再显示。

3、注意{}中如果列出几项，这除最后一项外每一项结尾加逗号，最后一项不用加。

"tabBar": {

    "selectedColor": "#1296db",

    "list": [{

      "pagePath": "pages/index/index",

      "text": "首页",

      "iconPath": "images/ico-homepng",

      "selectedIconPath": "images/ico-home-dpng"

    },{

      "pagePath": "pages/setting/setting",

      "text": "设置",

      "iconPath": "images/ico-settingpng",

      "selectedIconPath": "images/ico-setting-dpng"

    },{

      "pagePath": "pages/help/help",

      "text": "帮助",

      "iconPath": "images/ico-helppng",

      "selectedIconPath": "images/ico-help-dpng"

    }]

  }

分享一个完整的微信小程序自定义 Tabbar ，tabbar按钮可以设置为跳转页面，也可以设置为功能按钮。懒得看文字的可以直接去底部，博主分享了GitHub地址。

由于微信小程序自带的 Tabbar 功能比较单一，比如要做到中间是一个突出的圆形扫一扫按钮，就需要自定义 Tabbar 了。

博主创建了一个 Tabbar 组件，自己写的样式，在需要用到的页面引入组件。

组件使用了 position: fixed 定位到底部，所以在用到组件的页面，需要给 page 加上 margin-bottom 样式。

交互是通过在组件上定义的 bindtap 事件，来进行跳转页面或者触发功能模块，其中路由跳转是用的 wxswitchTab 。事件以及传参可以通过 triggerEvent ；

文件目录

引用组件

组件的data

组件的路由跳转

源码GitHub地址：>

官网地址：

>

以上就是关于微信小程序自定义tabbar，实现不同角色不同的tabbar全部的内容，包括:微信小程序自定义tabbar，实现不同角色不同的tabbar、总结一下，微信小程序的几种跳转方式、微信小程序中tabBar与导航API的页面跳转处理关系等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！