微信小程序标题栏系统默认的有样式,有时候我们可能需要修改一下,看看下面的属性
小程序可以全部自定义标题栏,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 () {}})
