微信小程序自定义标题栏

微信小程序标题栏系统默认的有样式,有时候我们可能需要修改一下,看看下面的属性

小程序可以全部自定义标题栏,7.0.0之后也可以单独修改某一个标题栏

如果全部需要在app.json 的window里面添加

"navigationStyle":"custom"

如下

 "window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "00d8a0","navigationBarTitleText": "WeChat","navigationBarTextStyle": "black","navigationStyle": "custom"},

如果是单独对某一个只需要在要修改的json里面添加"navigationStyle": "custom" 即可

如下

{

"navigationStyle": "custom"

}

记得不要在最外成添加window 否则无效果

需要注意的微信小程序原生的标题栏有沉浸栏与标题栏2部分组合如下

自定义需要注意的是要获取这个沉浸栏的高度然后在定义标题如果只写标题栏的

肯定会定上去,也不好看,

xml 里面

<view ><!-- 沉浸栏 -->
<view style="width:100%;height:{{statusBarHeight}}px"></view>
<!-- 标题栏 这里就可以自定义写标题 -->
<view>
<text>我是标题栏,里面修改自己想要的样式</text>
</view>
</view>

js里面

const app = getApp()
Page({/*** 页面的初始数据*/data: {statusBarHeight:0},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = thiswx.getSystemInfo({success: function (res) {console.log(res)console.log(res.statusBarHeight)that.setData({statusBarHeight: res.statusBarHeight})},})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

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

微信小程序自定义标题栏（搜索框）
(小白学习笔记) 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如何写微信弹窗,微信小程序自定义弹窗实现过程(附代码)_而已_前端开发者...
这篇文章主要介绍了微信小程序自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下小程序官网里弹出框一般都是类似下面形式: ...

微信小程序自定义标题栏

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

最新文章

热门文章