微信小程序自定义标题栏

微信小程序可以设置自定义标题栏，可以针对不同页面单独设置
1. 在页面文件 .json 文件中，设置如下属性，自定义导航栏和导航栏样式"navigationStyle": "custom","navigationBarTextStyle": "white",
　　特别是第二个 navigationBarTextStyle 属性可以将胶囊样式调整为透明效果

2. 设置自定义导航栏布局样式动效逻辑等

3. 划重点！！！导航栏中状态栏高度导航栏高度胶囊高度，需要得知这三个属性进行布局 + 兼容
　　这里的尺寸都是 px 为单位的！
　　3.1 状态栏高度
　　　　状态栏指的是显示手机的时间电量信号等信息的一块区域。参考如下图

　　市场上使用的手机状态栏高度有多种，如刘海屏全面屏 iOS特殊型号和安卓其他型号。
　　获取状态栏高度的方法：调用微信 wx.getSystemInfoSync() API获取状态栏高度

　　3.2 导航栏高度
　　　　胶囊和功能按钮显示的区域。参考如下图片

　　　　导航栏高度获取方法：安卓48px iOS 40px 这个是固定的。真机环境下，编辑器有误差

　　3.3 胶囊高度
　　　　各种机型测试的结果下都是 32px

　4. 滚动页面改变标题栏不透明度
　　　此处建议使用 pages 的一个监听事件 onPageScroll 监听页面滚动。设置标题栏背景的不透明度 rgba
　　　这个需要注意的是合理使用 setData 不能每次滚动都设置数据，不然可能导致页面卡顿等影响

测试机型：
Andorid: 小米6 小米mix3 oppoR9s
iPhone: 7P x xs xr

微信小程序自定义标题栏相关推荐

微信小程序自定义标题栏（搜索框）
(小白学习笔记) 1.首先在需要更改页面的json文件中加入"navigationStyle":"custom" 与"usingComponents& ...
微信小程序顶部标题栏与胶囊对齐
介绍最近在做微信小程序时,顶部标题栏总是与胶囊对不齐.往往是在这款手机上对齐了,在另外一款手机差很多.我在查阅资料后,提出了一种方法解决这个问题,即:在页面onLoad或组件created时,利用微 ...
微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注为何存在组件组件间的关系使用rel ...
微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
html如何写微信弹窗,微信小程序自定义弹窗实现过程(附代码)_而已_前端开发者...
这篇文章主要介绍了微信小程序自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下小程序官网里弹出框一般都是类似下面形式: ...

微信小程序自定义标题栏

微信小程序自定义标题栏相关推荐

最新文章

热门文章

微信小程序 自定义标题栏

微信小程序 自定义标题栏相关推荐

最新文章

热门文章

微信小程序自定义标题栏

微信小程序自定义标题栏相关推荐