lingxiaoyi / navigation-bar Goto Github PK

height: calc(100vh - 84rpx);，这是我原来减去tab的84,现在不行了

如果首页是tarbar，则需要使用switchTab。

例如 demo4 设置 "enablePullDownRefresh": true 后

<view>
  <!-- <navBar title='深色背景详情页' background='#00091a' backgroundColorTop='#00091a' color='#fff' back="{{true}}" iconTheme='white' bindback="handlerGobackClick"></navBar> -->
  <!-- < 个人中心 -->
  <navBar background='#00091a' backgroundColorTop='#00091a' color='#fff' back="{{false}}" home="{{false}}" iconTheme='white' bindback="handlerGobackClick">
    <view slot="left" class="left-title-wrapper" bind:tap="handlerGobackClick">
      <image class="left-title-arrow" src="https://xxx.png" />
      <text class="left-title">个人中心</text>
    </view>
  </navBar>

  <view class='main'>
    <view class='p'>深色背景详情页</view>
  </view>
</view>

微信官方自定义tabbar例子中，
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 48px;
background: #fff;
display: flex;
padding-bottom: env(safe-area-inset-bottom); //失效
}

当前页面的导航使用NavigationBa组件r时，该页面的底部tabBar的padding会无效
我尝试去掉NavigationBar的Component引用即恢复正常，有人遇到吗？

为了实现返回 icon 和title根据滑动距离动态改变颜色，用了icon font 显示返回按钮。
在第4行“”
和
第23行“{{title}}”
分别添加了“style="color:{{color}}"”
这样就可以实现了。
希望有帮助

1. 在ios7.0.3版本，iPhone 6s机型下，getMenuButtonBoundingClientRect有时候会报错，有时候取到的值都为0，所以在你的try catch中加了一条：
   try { rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null; if (rect === null) { throw 'getMenuButtonBoundingClientRect error'; } //取值为0的情况 if (!rect.width){ throw 'getMenuButtonBoundingClientRect error'; } }

2. 组件中不能使用标签等选择器，你的navBar.wxss是有标签选择器的。

调试基础库：2.8.2

内容区如果使用顶部绝对定位，就定位到胶囊区了， 使用绝对定位的地方去app.globalSystemInfo拿高度数据，由于是异步，第一次进来有可能又获取不到。

原因：获取到的胶囊按钮top居然小于状态栏高度，导致计算gap不对
let gap = rect.top - systemInfo.statusBarHeight;

测试Meizu Note 5通过的解决办法解决，在navBar.js中加上
//部分机型（比如：Meizu Note5）获取到的胶囊按钮top小于状态栏statusBarHeight高度 if(rect.top < systemInfo.statusBarHeight){ throw 'getMenuButtonBoundingClientRect error'; }

真机调试获取到的信息：

真机截图：

解决后真机截图：

• 基础调试库版本： 2.8.3
• 微信都是当前最新版本

wxml:

<view class="search">
    <navBar searchBar="{{true}}" background="{{searchBGColor}}"  bindsearch='search' />
</view>

wxss:

.search {
    margin-bottom: 0;
    padding-bottom: 0;
    z-index: 9999;   /* z-index 设置值超过navBar的最大z-index值 */
    position: fixed;
}

开发者工具预览都是正确的，真机(iphone xr/ipad pro)就不行了，大佬有测试过吗？

开发者平台调试效果：

真机效果：

ps: android真机是ok的。

在iPhone 6s部分机型下，偶现导航栏渲染不出来或者高度为0的情况，导致下边布局顶上去了。

navigateTo:fail:can not navigate to a tab bar page

该项目star更多，但是文档缺失，npm下载量更少。

另一个项目star较少，但文档全，npm下载量多：
https://github.com/lingxiaoyi/miniprograms-navigation-bar#readme

iphoneX tabbar变形：全局使用自定义的tabbar，其他tab来回切换都正常，切到自定义导航栏的界面就会出现tabbar变形问题，求助

您好, 如果页面要设置一个position: fixed;top:0;的元素 在刘海屏和普通屏幕中 top的设置很不稳定 有时候会过上有时候又过于下边, 请问有什么解决方案呢 感谢您

只要是在app.js里面设置了引入page这个js文件这个分享就会失效
去掉这个引入就会正常，如：

只设置返回按钮时 title的文字没有居中

网络请求数据动态设置title时,title显示不居中,静态写死是居中的

页面背景色和标题栏设置一样，计算的导航栏高度为 68px ，但是实际高度为 69px ，中间会有一个缝隙

thirdScriptError
this._getApp is not a function; [Component] Lifetime Method Error @ components/navBar/navBar#created
TypeError: this._getApp is not a function
at ye.getSystemInfo (http://127.0.0.1:63328/appservice/components/navBar/navBar.js:146:22)
at ye.created (http://127.0.0.1:63328/appservice/components/navBar/navBar.js:70:10)
at r.safeCallback (WAService.js:1:1037423)
at r.call (WAService.js:1:1037316)
at Function.x._advancedCreate (WAService.js:1:1136263)
at r.createComponent (WAService.js:1:1146424)
at e (WAService.js:1:1179207)
at e (WAService.js:1:1180502)
at e.value (WAService.js:1:1204216)
at x._advancedCreate (WAService.js:1:1134731)

如题，在onload中异步请求数据后动态设置title属性，title没有在页面上居中显示。

下拉刷新，页面默认不是白色，会把导航栏隐藏的白色拉下来，能否自定义颜色呢？
如图，页面背景色非白色，下拉出现导航栏隐藏的白色部分。

Component is not found in path "components/navBar" (using by "pages/index");onAppRoute
Error: Component is not found in path "components/navBar" (using by "pages/index")

还有 Components/navBar 目录下面的那个 app.js 怎么处理

看了一下线上小程序的日志，发现报错信息集中在 getMenuButtonBoundingClientRect，社区里面也有相关记录：https://developers.weixin.qq.com/community/develop/doc/000c8835e544c0123309255ee5fc00

需要控制小程序的白天和夜间模式，要动态的改背景色和iconTheme

目前有个业务场景，点击别人分享的小程序进来的情况需要隐藏返回按钮，毕竟点击返回也无法返回上一页。。。
类似这种

https://github.com/lingxiaoyi/navigation-bar/blob/master/pages/demo10/index.js
参考这个例子

当只显示一个图标时，背景不会随着变窄，在透明背景时体验不行