- 自定义顶部导航-微信小程序
随着小程序功能越来越多,在部分页面中,顶部区域也需要利用起来,而且有些要求和app/h5等样式统一,所以需要使用到自定义顶部导航,分享下自用的定义顶部导航。 小程序现在支持在单个页面中设置顶部样式为自定义,只需要页面package.json中加入 "navigationStyle": "custom" 顶部导航分为状态栏区域和标题区域。状态栏区域可以通过 wx.getSystemInfoSync() 中的 statusBarHeight 获取其高度,通过 windowWidth 获取其宽度;标题栏则要通过 wx.getMenuButtonBoundingClientRect() 获取小程序右上方的操作按钮位置及大小,再通过计算其top和状态栏高度等获得,标题栏宽度为windowWidth,高度为 (胶囊按钮的top - 状态栏高度)* 2 + 胶囊的高度。其他部分也通过类似的方法进行换算 [图片] 为了便于复用,将其封装为组件,采用slot的方式将内容加载入组件中。 现共有3种样式 1.空余出左侧及中部区域 [图片] [图片] 2.空出中部区域 [图片] [图片] 3.透明顶部导航 [图片] 代码片段:https://developers.weixin.qq.com/s/CJEjgbml7BG3
2023-02-21 - wx.setTabBarItem(Object object) 什么时候能加个设置页面路径的啊?
所有的都能设置,就路径不能,请问改变图标和标题的作用呢???
2019-10-24 - 自定义小程序顶部navigationStyle:custom设置页面
- 需求的场景描述(希望解决的问题) 通过app.json设置navigationStyle:custom以后,所有的页面都需要自定义顶部,但是小程序只有部分页面需要使用自定义头部,其他页面是默认的顶部就自己做了默认的顶部,然后使用下拉刷新的时候IOS下拉幅度不大时下拉的三个点会被header覆盖 - 希望提供的能力 希望能让navigationStyle:custom变成page.json中的配置项,配置以后当前页面的模式为自定义顶部,其他页面还是app.json中配置的或者是默认的顶部加标题。谢谢
2018-09-25