用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

小程序 - 自定义导航栏重要步骤

Rolan 2019-10-21 00:09

几个要点:statusBarHeight,用来获取手机状态栏的高度(),调用wx.getSystemInfo获取还有注意的,在写样式距离和大小时建议都用px,因小程序右边的胶囊也是用的px,不是rpx。wx.getMenuButtonBoundingClientRect()获 ...

几个要点:

  1. statusBarHeight ,用来获取手机状态栏的高度(),调用 wx.getSystemInfo 获取
  2. 还有注意的,在写样式距离和大小时建议都用px,因小程序右边的胶囊也是用的px,不是rpx。
  3. wx.getMenuButtonBoundingClientRect() 获取胶囊信息,用来计算 导航栏高度
  4. 单个页面配置自定义导航,记得把基础库 调节到 2.8.0 之上, 仅支持 微信客户端7.0.0 向上

官方链接:

  1. 自定义导航页面配置:navigationStyle
  2. 状态栏高度 wx.getSystemInfo()
  3. 胶囊 wx.getMenuButtonBoundingClientRect()

根据需求来设计(可以计算各种高度)

wx.getSystemInfo --> res.statusBarHeight
胶囊高度 + ( 胶囊距离顶部距离 - 状态栏高度) * 2
data:{
        statusHeight: 0,  //状态栏高度
        navHeight: 0      //导航栏高度
    }
    /**
     * 获取状态栏|导航栏高度,
     */
    getStatusBarHeight: function(){
        let capsule = wx.getMenuButtonBoundingClientRect() ; //胶囊信息
        wx.getSystemInfo({
            success(res) {
                that.setData({
                    statusHeight: res.statusBarHeight,
                    navHeight: capsule.height + (capsule.top - res.statusBarHeight) * 2
                })
            }
        })
      
    },
复制代码
<view class="status-height" style="height:{{ statusHeight }}px">  //状态栏
    cc
</view>
<view class="nav-height"  style="height:{{ navHeight }}px">       //导航栏
    bb
</view>
    
复制代码
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 北风丶 来自: 掘金