切换风格

城市 加州 星空 白云 雪山 龙珠 晚霞 薰衣草 简约黑色 粉色心情 绿野仙踪 简约米色 花卉 伦敦
12下一页
回复 17

5

主题

26

帖子

61

积分

注册会员

Rank: 2

积分
61
高适应性的自定义导航栏开发思路[复制链接]
发表于 2018-7-5 21:43:57 | 显示全部楼层 |阅读模式


  • 非自定义导航栏高度怎么计算?
  • 自定义导航栏高度由谁决定?
  • 小程序自定义导航栏开发注意点与参考文档
    [/ol]
    一、默认导航栏高度怎么计算?(非custom情况下获取)
  • wx.getSystemInfo  和  wx.getSystemInfoSync  获取机器信息
  • screenHeight  -  windowHeight   计算标题栏高度
  • {       'iPhone': 64,       'iPhone X': 88,       'android': 68 }
    不完全统计(ip6 , ip5 , ip6p , ipx , 小米mix2  , 小米5等综合了开发工具提供的数据和真机数据)所得
    [/ol]
    二、自定义导航栏高度由谁决定?(自定义情况下,屏幕高度和窗口高度没有差别,所以要通过步骤1先获取数据,预定义到代码中)
  • 开发时发现,自定义导航栏的实现需要 包含状态栏+胶囊 :没有自定义导航栏的时候页面是全屏幕滚动会出现在状态栏的下一层
  • 根据上一标题中步骤1的函数,可以获得状态栏高度  statusBarHeight  
  • demo,点击打开小程序开发工具
    [/ol]

    三、小程序自定义导航栏开发注意点与参考文档
  • 微信官方设计指导中关于胶囊按钮的描述 由此得知胶囊宽度87pt=116px,设置之后,的确能产生较好的兼容性效果
  • 社区Q&A:自定义标题栏高度计算在 navigationStyle: 'custom',苹果X和8兼容问题
  • 注意某些方法、参数的兼容性,时刻关注官方更新信息
  • 开一个项目采集设备的screenHeight,windowHeight,pixelRatio等信息到一个数据库中,或者微信可以提供这样一个数据库便于计算,亦或者微信优化自定义标题栏(譬如通知栏可以改变颜色但不要算在自定义范围内,给出胶囊宽高到通知栏距离到右侧屏幕边框距离等相关参数)
    [/ol]
  • 13titlebar.jpg

    13titlebar.jpg
    回复

    使用道具 举报

    10

    主题

    57

    帖子

    128

    积分

    注册会员

    Rank: 2

    积分
    128
    发表于 2018-7-31 10:04:35 | 显示全部楼层
    楼主,

    。这种情况怎么破啊?获取的高度都一样的!
    回复

    使用道具 举报

    0

    主题

    9

    帖子

    20

    积分

    新手上路

    Rank: 1

    积分
    20
    发表于 2018-7-23 19:16:32 | 显示全部楼层
    6
    回复

    使用道具 举报

    12

    主题

    32

    帖子

    80

    积分

    注册会员

    Rank: 2

    积分
    80
    发表于 2018-7-12 23:22:47 | 显示全部楼层
    可以搜索:信派百科;
    回复

    使用道具 举报

    5

    主题

    26

    帖子

    61

    积分

    注册会员

    Rank: 2

    积分
    61
    发表于 2018-7-6 17:29:07 | 显示全部楼层
    像你demo那样写有存在bug么,感觉是目前看到最好的解决办法,赞!!!
    回复

    使用道具 举报

    7

    主题

    26

    帖子

    63

    积分

    注册会员

    Rank: 2

    积分
    63
    发表于 2018-7-6 09:08:22 | 显示全部楼层
    要是能把状态栏隐藏就好了,不然总是有点怪怪的。
    回复

    使用道具 举报

    5

    主题

    26

    帖子

    61

    积分

    注册会员

    Rank: 2

    积分
    61
    发表于 2018-7-31 10:38:37 | 显示全部楼层
    非自定义标题栏 获取到的高度应该是不同的,你要先关闭custom设置,获取到高度差
    回复

    使用道具 举报

    10

    主题

    57

    帖子

    128

    积分

    注册会员

    Rank: 2

    积分
    128
    发表于 2018-7-31 10:55:48 | 显示全部楼层
    哦哦!但是不应该是通过两个高度,动态获取高度差才比较好的吗?还有你这里的高度差。不对的!iPhone的应该是48+状态栏的高度20=68,iPhoneX=82,Android=54+20=74,iPhone跟Android的状态栏高度都是20的!除了iPhoneX特殊!


    回复

    使用道具 举报

    5

    主题

    26

    帖子

    61

    积分

    注册会员

    Rank: 2

    积分
    61
    发表于 2018-7-31 13:48:35 | 显示全部楼层
  • 自定义标题栏的时候 没有动态高度差,就像你打印的一样,两个高度是一样的;
  • 状态栏的高度是包含在screenHeight - windowHeight   中的,也就是说 不需要单独加上20
    [/ol]
  • 回复

    使用道具 举报

    10

    主题

    57

    帖子

    128

    积分

    注册会员

    Rank: 2

    积分
    128
    发表于 2018-7-31 14:26:06 | 显示全部楼层
    哦哦!还有个地方想请问下,假如我要自定义一个导航栏,除去状态栏的高度,导航栏的高度是不是要通过iPhone   Android   iPhoneX来判断呢?
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|52小程序

    GMT+8, 2019-2-19 14:53 , Processed in 0.477566 second(s), 28 queries .

    Powered by Discuz! X3.4

    © 2018-2019 52小程序

    返回顶部