小程序篇 - uni-app自定义标题栏样式适配问题

我们自定义标题栏先要设置 navigationStyle: ‘custom’ 设置过后只会保留胶囊
其他的可以自由发挥咯
json

"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "健康管理","navigationStyle": "custom"}}
]

html：页面自定义标题栏

<view class="doctor-title" :style="{marginTop: statusBarHeight + 'px'}" @click="back"><van-icon name="arrow-left" color="#ffffff" size="20px" /><text>标题</text>
</view>

js部分
使用uni.getSystemInfoSync()去获取手机默认导航高度，uni-app自己提供的--status-bar-height在不同的手机发现还是有点偏差

<script>export default {data() {return {statusBarHeight: uni.getSystemInfoSync().statusBarHeight}},methods: {back(){uni.navigateBack()}}}
</script>

css部分

.doctor-title{position: absolute;margin: auto;left: 0;right: 0;z-index: 2;text-align: left;height: 44px;line-height: 44px;padding-left: 30upx;color: #fff;
}

好啦，标题栏样式就可以完美解决啦，有问题留言区讨论~

小程序篇 - uni-app自定义标题栏样式适配问题相关推荐

微信小程序拉起摄像头自定义拍摄界面样式
最近接了一个需求是拍摄照片传给后端做ocr身份证识别,但是需要更改拍摄的时候页面样式我粗略的编写了一下最后结果是这样的一.使用camera标签,直接在里边编写样式即可图中的绿色边框是使用canv ...
微信小程序顶部导航栏自定义，根据不同手机自适应距离状态栏高度，防止标题栏高度歪歪扭扭
微信小程序顶部导航栏自定义,根据不同手机自适应距离状态栏高度一.微信小程序顶部导航栏自定义 "navigationStyle": "custom" app. ...
mpvue自定义微信小程序indicator（指示点）样式
mpvue自定义微信小程序indicator(指示点)样式效果图 HTML <template><div class="container"><sw ...
微信小程序头部导航栏自定义
微信小程序头部导航栏自定义参考网址微信开放文档 navigationStyle导航栏样式:仅支持以下值:default默认样式,custom 自定义导航栏,只保留右上角胶囊按钮配置示例 {&quo ...
从0开发《工程测绘大师》小程序之什么是微信小程序篇（一）
我们今天来讲讲如何从0开发<工程测绘大师>小程序之什么是微信小程序篇.先来说说什么是微信小程序,什么是微信小程序?为什么会有微信小程序诞生?它到底解决了什么痛点?与传统的网页开发和APP相 ...
多平台多渠道账号体系绑定第一篇-微信小程序篇
先奉上本篇实现效果多平台多渠道账号体系绑定第一篇-微信小程序篇近来,在对接三方平台时,欲将多方开放平台统一整合入笔者的框架内. 如下为大致思路设计图由于需对接多方平台关联账号体系,思来之后,将设 ...
微信小程序篇】四. 案例：根据单号查询快递编号
快递查询(2020-1-7亲测) 项目准备创建项目demo4-expressQuery(因为练习取过这个名所以案例里面是demo-expressQuery ) 操作步骤同demo3 不过second ...
微信小程序实现微信APP上的扫一扫扫码跳到小程序对应的结果页面和签字等功能
最近做了一个小程序项目,这个小程序是搭配APP端使用的,大概需求是这样的,用户用微信的扫一扫或小程序首页的扫一扫都可以实现对APP上的二维码进行扫码识别,识别成功之后跳到页面进行渲染,然后用户可以对其 ...
微信小程序服务器和app互通,解读：App 与小程序的互通能力和限制
本文作者:轻芒,极客公园已获转载授权,如需转载请联系出处. 2018 年 05 月 19 日,微信官方公布了小程序的新能力,其中最引人关注的是: 「小程序上线 App 直接打开小程序功能」. 其实,「 ...

小程序篇 - uni-app自定义标题栏样式适配问题

小程序篇 - uni-app自定义标题栏样式适配问题相关推荐

最新文章

热门文章