微信小程序开发中遇到的问题之自定义导航栏

自定义导航栏功能:返回上一页,回到主页,音乐播放控制,标题。

要求:导航栏与微信右上角的默认椭圆转发关闭按钮水平对齐,高度一致。

问题点:1.右上角默认的按钮的高度是多少。

    2.如何确定自定义导航栏的位置。

    3.返回上一页的控制

hack:

  1.所有机型的右上角默认的按钮的高度都是32px;

  2.跟右边的按钮水平对齐解决方案:

    1.获取该设备的状态栏高度,即statusBarHeight。

    2.确认设备的标题高度titHeight。titHeight其实是固定的,IOS为44px,安卓48px。

    app.js

    wx.getSystemInfo({ 
      success: res => {
        _this.globalData.statusBarHeight = res.statusBarHeight ;
        _this.globalData.titHeight = res.system.indexOf('iOS')>-1?44:48;
      }   
    })

  

    3.计算得到自定义导航的位置,自定义导航高度为设计图高度,navigatorHeight。

    my-navigation.view
      <view class='my-navigation' style='padding-top:{{statusBarHeight}}px'>
        <view class='operation-bar {{model}}' style='top:{{alignTop}}px'>
      </view>

    

    my-navigation.js 
    data:{
          statusBarHeight: app.globalData.statusBarHeight,
          alignTop: (app.globalData.titHeight - 32)/2,  //32为右上角默认的按钮的高度
    }  

         

  3.返回上一页控制

    判断当前页面是否是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是全局唯一的,利用他的唯一性,在该实例下挂载相应的属性也会一直存在,不管在哪个页面,都不用再自己做缓存了。

  

    

  

 
      

      

      

猜你喜欢

转载自www.cnblogs.com/BlueCc/p/10671346.html