【微信小程序】自定义navigationBar标题栏

小程序默认使用的navigationBar只能设置颜色、文字，左侧返回按钮也是不可改变的，若要实现下方效果有解决方案，但是也有一定的问题。

1、更改app.json（2019.9.10更新）

  "window": {"navigationStyle": "custom"},

可以在页面中进行配置：

2、自定义标题栏
使用custom模式后，页面将延展到整个屏幕包括设备标题栏，有需要的话要在app.js中获取设备的标题栏高度，页面中再去使用这个值

/app.jswx.getSystemInfo({success: function(res) {this.globalData.statusBarHeight = res.statusBarHeight}})

接下来，就可以敲页面了，标题栏固定在顶部就可以了，想怎么写怎么写

4、存在的问题
1、下拉刷新时整个页面移动，包括标题栏，因为标题栏是在页面里的（安卓手机）
2、右上角的胶囊是一直存在的，要根据胶囊位置调整想要的效果
3、custom模式是全局的，不能单个页面使用，就意味每个页面都要自定义标题栏，建议使用模板（单页面目前可以使用）

本篇博客旨在记录了自己在小程序编程过程中碰到的一部分问题，如有错误的地方欢迎指正

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

微信小程序自定义navigationbar与下拉刷新思考
第一次开发小程序,产品提出要求导航栏字体样式,然后系统的未提供修改的接口. 那么只能自定义导航栏才行呀. 迅速的自定义了一个导航栏 app.json中添加 "navigationStyle& ...
微信小程序自定义navigationBar、自定义标题栏
最近在做小程序项目,需要用到自定义navigationBar,之前用过colorUI等组件库的navigationBar组件,但是现在想自己写一个,所以有了今天的小记在做navigationBar之 ...
微信小程序自定义搜索标题栏
一:需求把微信小程序标题栏处变成搜索栏. 自定义返回上级页面. 二:需求分析首先要把小程序标题栏设置为可自定义. 然后计算原标题栏的高度组成结构. 根据计算高度设置搜索框和返回按钮的布局. 最后进 ...
微信小程序自定义navigationBar
navigationBar是什么? 微信小程序一般来说有两个bar,一个导航栏,一个tabbar(小程序下方一排切换按钮),实现下方自定义tabbar的方法一般来说较为简单,现在着重叙述上方自定义导航 ...
微信小程序自定义navigationBar顶部导航栏，兼容安卓ios
1.设置导航栏自定义"navigationStyle":"custom" "pages": [ //pages数组中第一项表示应用启动页,参 ...
微信小程序自定义navigation-bar导航栏(自适应安卓苹果)
最近在写商城,中途遇到了需要自定义修改导航栏的操作,大概是如下图接过样子的,于是想手写一份,但我发现右上角的分享按钮在不同设备离顶部的距离是不一样的,于是找了下官方划水员写的文档(点这里查看),(⊙o ...
微信小程序-自定义导航栏及返回上一级页面的实现
一.参考文章 1.微信小程序自定义navigationBar 2.微信小程序返回上一级页面的实现代码 3.小程序开发--常用布局二.需求在导航栏中需要显示信息的"未读数量",所 ...
原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...

【微信小程序】自定义navigationBar标题栏

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

最新文章

热门文章