小程序
小游戏
企业微信
微信支付
扫描小程序码分享
本人也在社区,百度所搜了一下,也参考了一下,没看太懂,复制下来也是一直报错
5 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
首先在你需要自定义导航栏的页面的json文件里加上这个:
"navigationStyle": "custom"
然后用这个函数来获取导航栏高度
getHeight:function(){ var that = this , sysinfo = wx.getSystemInfoSync() , statusHeight = sysinfo.statusBarHeight , windowWidth = wx.getSystemInfoSync().windowWidth , isiOS = sysinfo.system.indexOf('iOS') > -1 //原生胶囊宽87pt,距离右侧7pt,共94pt=125px,back&home区域是65px,加上间隔10px,共计消耗200px,胶囊左边与标题框空10px //1pt=4/3 px //这里算出来和实际效果不太一样,减掉185px刚刚好,选择相信眼睛哈哈哈 , titleWidth = windowWidth - 185 , navHeight; if (!isiOS) { navHeight = 48; } else { navHeight = 44; } // 获取系统信息 var systemInfo = wx.getSystemInfoSync(); // 胶囊按钮位置信息 var menuButtonInfo = wx.getMenuButtonBoundingClientRect(); // 导航栏高度 = 状态栏到胶囊的间距(胶囊距上距离-状态栏高度) * 2 + 胶囊高度 + 状态栏高度 that.globalData.statusHeight = statusHeight that.globalData.navHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height },
上面代码里面的statusHeight,就是手机状态栏的高度(时间那一栏),navHeight就是原生导航栏的高度,你定义两个view在页面顶部,一个高度为statusHeight,另一个高度为navHeight,然后在navHeight里面写你想要实现的导航栏效果。
至于居中、透明这些问题,都可以自己写组件了,应该很好解决吧?
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
<view class="naviBar" style="height: {{statusHeight + navHeight}}px;">
<view style="height: {{statusHeight}}px;"></view>
<view class="naviBar_address" style="height: {{navHeight}}px;">
<view>这里写你自定义的导航栏,具体咋写随你</view>
</view>
onLoad(){
var statusHeight = getApp().globalData.statusHeight
var navHeight = getApp().globalData.navHeight
this.setData({
statusHeight:statusHeight,
navHeight:navHeight,
})
}
onLaunch: function () {
xxxxx
xxxx
//无视上面的原有的代码,这里加在最后面就行
this.getHeight() // 获取高度信息
},
/**
* 获取高度信息
*/
getHeight:function(){
var that = this
, sysinfo = wx.getSystemInfoSync()
, statusHeight = sysinfo.statusBarHeight
, windowWidth = wx.getSystemInfoSync().windowWidth
, isiOS = sysinfo.system.indexOf('iOS') > -1
//原生胶囊宽87pt,距离右侧7pt,共94pt=125px,back&home区域是65px,加上间隔10px,共计消耗200px,胶囊左边与标题框空10px
//1pt=4/3 px
https://developers.weixin.qq.com/s/ubZsFHmh71uR
https://developers.weixin.qq.com/s/ZNGKeGmt7zuP
我是这么写的
把你现有的代码发出来看看
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
首先在你需要自定义导航栏的页面的json文件里加上这个:
"navigationStyle": "custom"
然后用这个函数来获取导航栏高度
getHeight:function(){ var that = this , sysinfo = wx.getSystemInfoSync() , statusHeight = sysinfo.statusBarHeight , windowWidth = wx.getSystemInfoSync().windowWidth , isiOS = sysinfo.system.indexOf('iOS') > -1 //原生胶囊宽87pt,距离右侧7pt,共94pt=125px,back&home区域是65px,加上间隔10px,共计消耗200px,胶囊左边与标题框空10px //1pt=4/3 px //这里算出来和实际效果不太一样,减掉185px刚刚好,选择相信眼睛哈哈哈 , titleWidth = windowWidth - 185 , navHeight; if (!isiOS) { navHeight = 48; } else { navHeight = 44; } // 获取系统信息 var systemInfo = wx.getSystemInfoSync(); // 胶囊按钮位置信息 var menuButtonInfo = wx.getMenuButtonBoundingClientRect(); // 导航栏高度 = 状态栏到胶囊的间距(胶囊距上距离-状态栏高度) * 2 + 胶囊高度 + 状态栏高度 that.globalData.statusHeight = statusHeight that.globalData.navHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height },
上面代码里面的statusHeight,就是手机状态栏的高度(时间那一栏),navHeight就是原生导航栏的高度,你定义两个view在页面顶部,一个高度为statusHeight,另一个高度为navHeight,然后在navHeight里面写你想要实现的导航栏效果。
至于居中、透明这些问题,都可以自己写组件了,应该很好解决吧?
<view class="naviBar" style="height: {{statusHeight + navHeight}}px;">
<view style="height: {{statusHeight}}px;"></view>
<view class="naviBar_address" style="height: {{navHeight}}px;">
<view>这里写你自定义的导航栏,具体咋写随你</view>
</view>
</view>
onLoad(){
var statusHeight = getApp().globalData.statusHeight
var navHeight = getApp().globalData.navHeight
this.setData({
statusHeight:statusHeight,
navHeight:navHeight,
})
}
onLaunch: function () {
xxxxx
xxxx
xxxx
//无视上面的原有的代码,这里加在最后面就行
this.getHeight() // 获取高度信息
},
/**
* 获取高度信息
*/
getHeight:function(){
var that = this
, sysinfo = wx.getSystemInfoSync()
, statusHeight = sysinfo.statusBarHeight
, windowWidth = wx.getSystemInfoSync().windowWidth
, isiOS = sysinfo.system.indexOf('iOS') > -1
//原生胶囊宽87pt,距离右侧7pt,共94pt=125px,back&home区域是65px,加上间隔10px,共计消耗200px,胶囊左边与标题框空10px
//1pt=4/3 px
https://developers.weixin.qq.com/s/ubZsFHmh71uR
https://developers.weixin.qq.com/s/ZNGKeGmt7zuP
我是这么写的
把你现有的代码发出来看看