小程序中自定义头部标题栏

小程序最开始只能全局定义头部标题栏，也就是说一旦你想某个页面自定义头部标题栏，那么所有的页面都需要重新定义（也就是所有页面都需要重写头部标题栏）；

但现在新版本的微信已经开放了可以单页面自定义头部标题栏（很舒服）

只需在你想自定义的页面的.json下更改一下配置就可（我的是index.json页面）

然后需要在app.js中动态获取标题栏的高度（是为了解决iPhone X这种刘海屏的影响）

// 头部的自定义的高度

statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],

然后就可以在需要的页面（我的是index.wxml页面）进行代码书写了

<!-- 自定义的导航栏 -->
<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px"><image class='nav_logo' src='{{staticImg}}index/nav_logo.png'></image><view class='navInput'><image src='{{staticImg}}index/nav_search.png'></image><input placeholder='搜索你想要的内容' placeholder-class='none' placeholder-style='color:#b3b3b3;font-size:22rpx;'></input></view>
</view>
<view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>

　再在当前页面.wxss页面写出你需要自定义的样式即可（我的是index.wxss）

/* 自定义导航栏开始 */
.custom{position: fixed;width: 100%;top: 0;left: 0;height: 45px;/* background: #c00; */z-index: 999;background: #fff;
}
.nav_logo{float: left;margin-left: 22rpx;margin-top: 22rpx;margin-right: 15rpx;display: block;width:61rpx;height:47rpx;
}
.navInput{float: left;margin-top: 16rpx;width: 440rpx;height: 58rpx;overflow: hidden;box-sizing: border-box;padding-left: 60rpx;background: #eeeeee;border-radius: 40rpx;position: relative;
}
.navInput image{position: absolute;left: 12rpx;top: 13rpx;width:40rpx;height:40rpx;
}
.navInput input{width: 100%;height: 58rpx;background: #eeeeee;font-size: 22rpx;
}
.custom text{display: inline-block;color: #fff;font-size: 34rpx;font-weight: 500;max-width: 280rpx;
}
.empty_custom{height: 45px;width: 100%;
}
/* 自定义导航栏结束 */

custom和empty_custom的高度是px的单位，因为app.js中动态获取的标题栏高度单位是px,（最后不要动这个高度单位，其他自己写的样式可以统一写为rpx即可）所以你后面自己所书写的样式可以自己定义（1px=2rpx）

　当然。你在app.js获取的高度需要传回给自定义页面的js(我的index.js)

const app = getApp()
Page({data: {// 头部导航栏的高度statusBarHeight: app.globalData.statusBarHeight,}})

　　下面是我的自定义的页面标题栏（对其他的页面没有任何影响）

好了，结束！！！

转载于:https://www.cnblogs.com/xinheng/p/10848720.html

小程序中自定义头部标题栏相关推荐

微信小程序中自定义背景导航栏透明背景设置
首先确定好自己要在哪个页面中使用自定义头部导航栏样式在该页面中找到xxx.json文件中添加上 "navigationStyle":''custom" 这样在页面中头部 ...
微信小程序可以加服务器上的字体,微信小程序中自定义字体
微信小程序支持自定义字体开放出来也有段时间,这边整理下使用自定义字体中,容易忽略的一些问题,和简便的全局自定义方式.如果是同时加载两种字体包,先下载下来的会被后下载下来的字体包给覆盖. 官网接口文档 ...
微信小程序中自定义组件
文章目录小程序项目 app.json pages/index/index.wxml pages/index/index.wxss pages/index/index.js 自定义组件 compone ...
微信小程序中自定义导航和地图定位
在健康码中,主要的难点技术就是在小程序中定位.自定顶部导航. 自定义导航在微信小程序中,默认的顶部导航不能设置图片背景或者是透明背景,只能自定义导航. 在每一个页面中引入,就是得到自己定义[个性化的 ...
【微信小程序】小程序之自定义头部导航栏背景图
一般的导航栏都是微信自定义生成的,但是有的项目项目当中感觉头部样式太过单调,不怎么好看.就设计了不要小程序头部标题栏的页面,为此找了好多方法都没有解决.最终还是让我给找到了一个解决的方法.就是在jso ...
【微信小程序】自定义navigationBar标题栏
小程序默认使用的navigationBar只能设置颜色.文字,左侧返回按钮也是不可改变的,若要实现下方效果有解决方案,但是也有一定的问题. 1.更改app.json(2019.9.10更新) &quo ...
《十》微信小程序中自定义组件的组件模板和样式
组件 WXML 模板: 组件模板的写法与页面模板相同. 模板数据绑定: 与普通的 WXML 模板类似,可以使用数据绑定.  &l ...
微信小程序中自定义函数的学习使用
新手,最近在给学校搞个党费计算器.需要自己定义函数来实现某个功能. 1.无参函数: 函数都是写在js文件里面的. Page({data:{income1:'0',},cal:function(e){t ...
手把手教你实现小程序中的自定义组件
之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 1.6.3 开始,官方对于 ...

小程序中自定义头部标题栏

小程序中自定义头部标题栏相关推荐

最新文章

热门文章