热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

详解微信小程序开发过程中tabbar页面显示问题的解决办法

这篇文章主要为大家详解微信小程序开发过程中tabbar页面显示问题的解决办法,感兴趣的小伙伴们可以参考一下
在微信小程序的开发过程中如果有使用过tabbar的同学,我相信一定会遇到一些困扰。为什么有些时候代码中明明已经在app.json里面增加了tabbar,可以页面中就是不显示呢?可不可以有些页面显示tabbar,而有些页面不显示tabbar呢?今天我把我在开发过程中遇到的问题整理出来跟大家分享。
问题1:为什么页面底部不显示tabbar?
很多网友(包括我自己)也遇到过此类问题,在app.json里面明明加了tabbar,list里面也加了路径怎么就是不显示呢?举例,如下代码,为什么屏幕页面底部没有如期出现tabbar呢?

{
  "pages":[
    "pages/clickDemo/clickDemo",
    "pages/logs/logs",
    "pages/index/index",
    "pages/mypage/mypage"
  ],
  "window": {
    "backgroundTextStyle": "dark ",
    "navigationBarBackgroundColor": "#ddd",
    "navigationBarTitleText": "Tabbar Demo",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#ff0000"
  },
  "tabBar": {
    "color": "#000000",
    "borderStyle": "#000",
    "selectedColor": "#9999FF",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "image/location_normal.png",
        "selectedIconPath": "image/location_selected.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "设置",
        "iconPath": "image/setting_normal.png",
        "selectedIconPath": "image/setting_selecred.png"
      }
    ]
  }
}

我们看一下页面的显示结果如下:

我们可以看看上面代码中的pages数组的内容是:

"pages":[
"pages/clickDemo/clickDemo",
"pages/logs/logs",
"pages/index/index",
"pages/mypage/mypage"
]

tabbar中list数组内容是:

"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "image/location_normal.png",
"selectedIconPath": "image/location_selected.png"
},
{
"pagePath": "pages/logs/logs",
"text": "设置",
"iconPath": "image/setting_normal.png",
"selectedIconPath": "image/setting_selecred.png"
}

是不是发现为什么底部不出现TabBar?原因在于,app.json头部的pages数组的第一项"pages/clickDemo/clickDemo"没有成为tabBar的一员,也就是在tabBar的list数组内没有链接clickDemo页面的条目。

【解决办法】1.我们在list数组内加入链接clickDemo页面的条目,下面给出了这段代码。

{
  "pagePath": "pages/clickDemo/clickDemo",
  "text": "事件Demo",
  "iconPath": "image/setting_normal.png",
  "selectedIconPath": "image/setting_selecred.png"
}

效果如下:

【解决办法】假如当前也是一级页面,到希望跳转到的页面不要有Tabbar时,不要使用 redirectTo而是使用 navigateTo就可以了。

以上就是详解微信小程序开发过程中tabbar页面显示问题的解决办法的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • 本文详细介绍了如何在微信小程序中使用JavaScript实现图片上传至PHP服务器的方法。通过具体的代码示例,帮助开发者掌握从客户端选择图片、处理图片数据到服务器端接收并保存图片的完整流程。同时,文章还提供了常见问题的解决方案和优化建议,确保上传过程的高效性和稳定性。 ... [详细]
  • 在本文中,我们将探讨如何使用 UniApp 封装小程序 API 请求接口的最佳实践。通过创建 `request.js` 文件,定义基础 URL 并传入后端提供的 URL 作为请求参数。同时,配置请求方法(如 GET、POST)和请求头(例如包含 token 的认证信息),以实现高效、安全的 API 调用。此外,我们还将介绍如何处理请求和响应的错误,以及如何优化请求性能,确保应用在不同平台上的兼容性和稳定性。 ... [详细]
  • 微信支付授权目录配置详解及操作步骤
    在使用微信支付时,若通过WeixinJSBridge.invoke方法调用支付功能,可能会遇到“当前页面URL未注册”的错误提示,导致get_brand_wcpay_request:fail调用微信JSAPI支付失败。为解决这一问题,需要正确配置微信支付授权目录,确保支付页面的URL已成功注册。本文将详细介绍微信支付授权目录的配置步骤和注意事项,帮助开发者顺利完成支付功能的集成与调试。 ... [详细]
  • 如何构建并优化微信小程序页面的设计与功能
    本文将深入探讨微信小程序页面的设计与优化方法,旨在帮助开发者高效构建功能完备且用户体验良好的小程序。通过实例分析与技术详解,读者能够掌握从页面布局到功能实现的全过程,提升开发技能与应用质量。 ... [详细]
  • 手机上编写和运行PHP代码的最佳软件推荐 ... [详细]
  • 在微信小程序中,页面的加载机制与传统应用类似,每次打开新页面时都会创建一个新的视图对象并进行叠加。当用户点击返回按钮时,当前页面会被关闭并从堆栈中移除。这一过程涉及页面管理与资源释放,确保了用户体验的流畅性和系统的稳定性。微信小程序支持同时打开的页面数量有限制,最多可同时保持10个页面的打开状态,以避免内存溢出和性能下降。 ... [详细]
  • 本文介绍了如何通过掌握 IScroll 技巧来实现流畅的上拉加载和下拉刷新功能。首先,需要按正确的顺序引入相关文件:1. Zepto;2. iScroll.js;3. scroll-probe.js。此外,还提供了完整的代码示例,可在 GitHub 仓库中查看。通过这些步骤,开发者可以轻松实现高效、流畅的滚动效果,提升用户体验。 ... [详细]
  • Ceph API微服务实现RBD块设备的高效创建与安全删除
    本文旨在实现Ceph块存储中RBD块设备的高效创建与安全删除功能。开发环境为CentOS 7,使用 IntelliJ IDEA 进行开发。首先介绍了 librbd 的基本概念及其在 Ceph 中的作用,随后详细描述了项目 Gradle 配置的优化过程,确保了开发环境的稳定性和兼容性。通过这一系列步骤,我们成功实现了 RBD 块设备的快速创建与安全删除,提升了系统的整体性能和可靠性。 ... [详细]
  • 本文探讨了在Lumen框架中实现自定义表单验证功能的方法与挑战。Lumen的表单验证机制默认返回无状态的JSON格式API响应,这给初学者带来了一定的难度。通过深入研究Validate类,作者分享了如何有效配置和使用自定义验证规则,以提升表单数据的准确性和安全性。 ... [详细]
  • 0.10.2 编译在 ARMHF 和 ARME 架构上遇到问题 ... [详细]
  • MVVM架构~mvc,mvp,mvvm大话开篇
    返回目录百度百科的定义:MVP是从经典的模式MVC演变而来,它们的基本思想有相通的地方:ControllerPresenter负责逻辑的处理,Model提供数据,View负责显示。作为一种新的模 ... [详细]
  • 在Laravel中实现PHP对JSON数据的发布与处理 ... [详细]
  • 如何在Android应用中设计和实现专业的启动欢迎界面(Splash Screen)
    在Android应用开发中,设计与实现一个专业的启动欢迎界面(Splash Screen)至关重要。尽管Android设计指南对使用Splash Screen的态度存在争议,但一个精心设计的启动界面不仅能提升用户体验,还能增强品牌识别度。本文将探讨如何在遵循最佳实践的同时,通过技术手段实现既美观又高效的启动欢迎界面,包括加载动画、过渡效果以及性能优化等方面。 ... [详细]
  • Python正则表达式详解:掌握数量词用法轻松上手
    Python正则表达式详解:掌握数量词用法轻松上手 ... [详细]
  • 在Java应用中实现只读模式的切换方法与技巧 ... [详细]
author-avatar
夏目nyako酱丶
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有