微信小程跳转到tabbar页面显示延迟必须点击其他切换才显示

这个是小程序自身问题目前还没有得到官方解决可以自己写tabBar代替原生的tabBar。

获取微信小程序的AppID首先，我们需要拥有一个帐号，如果你能看到该文档，我们应当已经邀请并为你创建好一个帐号。注意不可直接使用服务号或订阅号的AppID。利用提供的帐号，登录，就可以在网站的设置、开发者设置中，查看到微信小程序的AppID了。

微信小程序跳转的API

1、wxnavigateTo(obj)保留当前页面，跳转到应用内的某个页面

wxnavigateTo({ url: 'testid=1' })

2、wxredirectTo(OBJECT)关闭当前页面，跳转到应用内的某个页面。

wxredirectTo({ url: 'testid=1' })

3、wxnavigateBack(OBJECT)关闭当前页面，返回上一页面或多级页面

wxnavigateBack({ delta: 2 })

4、wxswitchTab(OBJECT)跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wxswitchTab({ url: '/index' })

5、wxreLaunch(OBJECT)关闭所有页面，打开到应用内的某个页面。

wxreLaunch({ url: 'testid=1' })

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

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

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

例子：>

url 属性 （表示要跳转的页面地址，必须以 / 开头）

open-type （表示跳转的方式，必须为 switchTab ）

url 属性 （表示要跳转的页面地址，必须以 / 开头）

open-type （表示跳转的方式，必须为 navigate ）

非tabBar页面 跳转时，open-type 也可以省略

open-type 属性值为: navigateBack

结合 delta 属性：表示后退的层级，默认是 1 ，1时该属性可省略不写

调用 wxswitchTab (object object ) 方法，其中 object 参数对象的属性列表如下

调用wxnavigateTo ( object object )方法，其中 object 参数对象的属性列表，如下

调用wxnavigateBack(object object ) 方法，可以返回上一页面或多级页面，其中object 参数可选的，属性列表 如下

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

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

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

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

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

文件目录

引用组件

组件的data

组件的路由跳转

源码GitHub地址：>

以上就是关于微信小程跳转到tabbar页面显示延迟必须点击其他切换才显示全部的内容，包括:微信小程跳转到tabbar页面显示延迟必须点击其他切换才显示、微信小程序跳转的API、小程序自定义tabbar闪动问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！