微信小程序自定义底部导航栏,切换不同页面显示不同tabbar

微信小程序自定义底部导航栏,切换不同页面显示不同tabbar,第1张

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

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

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

首先有一个模板文件:tabbarwxml

在appjson中无需定义“tabBar”

在appjs中自定义如下

在appwxss中定义显示样式

indexwxml,用到自定义tabbar的页面的首部都需要引入模板文件

indexjs

logsjs

加载自定义tabbar的那句话(appeditTabBar)写在onload或onshow中都可以。

只写了两个主页面,其他页面可自行定义跳转。

最后放上效果图:

您好!很高兴能为您解答, 微信小程序 跳转页面

小程序页面有2种跳转,可以在wxml页面或者js中:

1,在wxml页面中:

1

2

3

跳转到新页面

在当前页打开

切换到首页Tab

2,在js页面中:

注意此处注意两个关键词 “应用内的页面” 和 “tabBar页面”。 appjson文件中tabBar中注册过的tab页,即为“tabBar页面”,非tabBar中注册占用的页面即为“应用内的页面” 。 如下图:home页面为“应用内的页面”,index和logs页面则为 “tabBar页面”。

以上就是关于微信小程序自定义底部导航栏,切换不同页面显示不同tabbar全部的内容,包括:微信小程序自定义底部导航栏,切换不同页面显示不同tabbar、微信小程序页面跳转的方法有哪些、等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/9653474.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-30
下一篇 2023-04-30

发表评论

登录后才能评论

评论列表(0条)

保存