自定义导航栏功能:返回上一页,回到主页,音乐播放控制,标题。
要求:导航栏与微信右上角的默认椭圆转发关闭按钮水平对齐,高度一致。
问题点:1.右上角默认的按钮的高度是多少。
2.如何确定自定义导航栏的位置。
3.返回上一页的控制
hack:
1.跟右边的按钮水平对齐解决方案:
1.获取该设备的状态栏高度,即statusBarHeight。
2.获取胶囊的位置大小信息。
wx.getSystemInfo({
success: e => {
this.globalData.StatusBar = e.statusBarHeight; /**状态栏高度 */
let custom = wx.getMenuButtonBoundingClientRect(); /**胶囊信息 */
this.globalData.Custom = custom;
this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight; /**导航栏高度 */
}
})
3.设定导航栏高度,padding使左侧高度与右侧胶囊一致。
my-navigation.view
<view class='my-navigation' style='height:{{CustomBar}}px'>
<view class='operation-bar {{model}}' style='height:{{CustomBar}}px;padding-top:{{StatusBar}}px;'></view>
</view>
my-navigation.js
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
Custom: app.globalData.Custom
}
2.返回上一页控制
判断当前页面是否是tabbar页面,如果是隐藏。
判断当前页面栈pages长度,大于1才显示。
如何获取当前页和整个页面栈?
通过getCurrentPages()即可获取当前页面栈,返回的是数组。
当前页面栈长度getCurrentPages().length
当前页即为getCurrentPages()[getCurrentPages().length - 1],
判断路径时getCurrentPages()[getCurrentPages().length - 1].route即可获取当前页面路径,根据路径判断是否是tabbar页面。
返回上一页跳转:
wx.navigateBack({
delta:1
})
音乐播放控制这里不做详细赘述,说下大体思路,通过小程序全局背景音乐控制api:wx.getBackgroundAudioManager()实现,通过wx.getBackgroundAudioManager()创建BackgroundAudioManager实例,然后在该实例对象下加入播放的路径,标题,时间,播放进度等,不同页面都需要加载一次,但是BackgroundAudioManager是全局唯一的,利用他的唯一性,在该实例下挂载相应的属性也会一直存在,不管在哪个页面,都不用再自己做缓存了。