微信小程序(一)自定义导航栏和fixed失效及各机型兼容问题
前言
【微信小程序(一)自定义导航栏和fixed失效及各机型兼容问题】相信小伙伴们应该或多或少都开发过微信小程序,微信小程序的写法虽然和vue有很多类似的地方,但又有很多vue属性,在小程序中没有类似的实现,比如计算属性,watch
监听等;
因为小程序是附着在微信 app 上,所以经常要处理一些安卓端和苹果端的兼容,比如有些苹果机屏幕下方有安全区域,一些安卓机上点输入框输入完毕后点完成按钮键盘不能自动收回,导致输入框不能失去焦点的问题,等等...
为了以后自己和小伙伴们不再浪费踩坑的时间,我打算写一些文章记录一下我在开发微信小程序中遇到的一些坑和一些小功能的实现过程。
目录:
- 微信小程序(一)自定义导航栏和fixed失效及各机型兼容问题
- 微信小程序(二)用
movable-view
实现左滑删除功能 - 微信小程序(三)实现类似Vue中的
computed
,watch
功能 - 微信小程序(四)绝对不可错过切换自定义菜单栏的骚操作
- 微信小程序(五)不同机型中的输入框兼容问题(待更新)
- ...
cover-view
组件使用 fixed
样式失效问题
背景因项目需求,要开发一个自定义
tabBar
,在微信官方文档找到一个demo,官方demo看到 tabBar
组件是用基础组件 cover-view
和 cover-image
构建的架子,用 position
的 fixed
固定定位在手机屏幕最下方,用真机调试是发现 tabBar
组件并不一定会固定在屏幕的最下方,而且如果页面滑动,用 fixed
固定的区域会上下移动文章图片
官方demo 示例代码
原因:
在微信社区找相关问题发现是
cover-view
的原因,然后这个问题直到现在好像还没修复文章图片
解决方案
改用
view
和 image
基础组件构建架子就可以了自定义导航栏、状态栏在不同机型的适配 背景原因
因为不同机型的导航栏和胶囊距上下间距不同,导致自定义的导航栏的高度不能固定。需求是导航栏的文字要和胶囊对齐。
解绝方案
废话不多说了,直接上代码,后面有解释说明:
/* 获取胶囊的位置和手机状态栏的信息 */
async getMenuInfo() {
let { top, height } = wx.getMenuButtonBoundingClientRect();
let statusBarHeight = "";
wx.getSystemInfo({
success(res) {
statusBarHeight = res.statusBarHeight
}
})
this.setData({
topParams: {
top,
height,
statusBarHeight
},
})
},
通过
wx.getMenuButtonBoundingClientRect()
获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。获取的参数解释:
top
是上边界坐标,也就是胶囊距离屏幕顶部的距离,单位:pxheight
是胶囊高度,单位:px- 然后通过
wx.getSystemInfo()
获取状态栏的高度statusBarHeight
,单位px; - 综上所述可知 胶囊距离状态栏的距离 = 胶囊距离屏幕顶部的距离(
top
) - 状态栏的高度(statusBarHeight
)
通过这些参数你就可以写出自己想要的各种自定义导航栏的样式了。
wx.getMenuButtonBoundingClientRect()
wx.getSystemInfo()
写在最后 我是 AndyHu,目前暂时是一枚前端搬砖工程师。
文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞和关注呀
未经许可禁止转载
speak less,do more.
推荐阅读
- 微信小程序(四)绝对不可错过切换自定义菜单栏的骚操作
- 投稿|985小镇做题家的迷茫,也许开放是答案
- 六个小时认识了一个人
- 投稿|张小泉公关危机,是“摆烂”造成的吗?
- 芯片|小米系股权基金正悄悄募集100亿
- c语言|C语言制作小游戏——贪吃蛇
- 投稿|张小泉钟薛高:错在傲慢,溃于偏见
- 要做一个让你觉得暖到骨子里的小姑娘
- 山里孩子
- 大数据必学Java基础(程序中常见问题和编译方式)