评论

wepy 适配各种机型的自定义小程序header

本文讲述适配各种机型的自定义小程序header

因为安卓和ios打开小程序的时候,头部的标题,ios在中间,安卓的是靠左

但是客户要求都居中,所以就上网搜了一下怎么弄这个自定义标题,望采纳。


本文讲述适配各种机型的自定义小程序header

需要自取

框架: wepy2.0 + vuex

关键就是如何计算这个小程序在不同机型的header的高度 【customHeaderHeight

js代码

getDeviceParameters({ commit }) {
  // 获取当前手机配置
  const { screenHeight, screenWidth, statusBarHeight } = wx.getSystemInfoSync()
  let rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null // 胶囊按钮位置信息
  
  let customHeaderHeight = (function() // 导航栏高度
    let gap = rect.top - statusBarHeight // 动态计算每台手机状态栏到胶囊按钮间距
    return statusBarHeight + 2 * gap + rect.height
  })()


  // 是否为iphoneX系列
  const isiPhoneXSeries = screenHeight / screenWidth > 2
}


css代码


我是将这些变量都存在了vuex 的 store里,方便页面使用,如果有更方便的方法,希望可以分享一下,谢谢.

最后一次编辑于  06-08  
点赞 0
收藏
评论

1 个评论

  • Admin²⁰²⁰
    Admin²⁰²⁰
    04-28

    感谢分享

    wepy2.x可以直接vue了吗?


    04-28
    赞同
    回复 1
    • Nostalgia 💭
      Nostalgia 💭
      04-29
      语法类似,但是其实还是很多坑.slot的name还不能用
      04-29
      回复
登录 后发表内容