开启辅助访问 切换到宽版

精易论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

用微信号发送消息登录论坛

新人指南 邀请好友注册 - 我关注人的新帖 教你赚取精币 - 每日签到


求职/招聘- 论坛接单- 开发者大厅

论坛版规 总版规 - 建议/投诉 - 应聘版主 - 精华帖总集 积分说明 - 禁言标准 - 有奖举报

查看: 740|回复: 0
收起左侧

[技术分享] uniapp顶部自定义NavBar时适配刘海屏?

[复制链接]

结帖率:0% (0/2)
发表于 2021-10-26 23:08:05 | 显示全部楼层 |阅读模式   湖北省咸宁市
uni-app提供的系统参数获取的APIlet systemInfo = uni.getSystemInfoSync();,systemInfo.statusBarHeight就是系统的状态栏高度。在设计NAVBAR的时候可以加上一个空白div,高度就是为状态栏的高度。

<view class="nav-bar" :style="colorStyle">
                <view class="status-bar" :style="statusBarStyle"></view>
                <view class="content" v-if="ids.length === 0">
                        <text @click="backForward" class="back-icon iconfont icon-fanhui"></text>
                        <text class="title">{{title}}</text>
                </view>
                <view class="select" v-else>
                        <text class="txt" @click="cancelSelect">取消</text>
                        <text class="nm">已选择{{ids.length}}个</text>
                        <text class="txt" @click="selectedAll">{{chooseText}}</text>
                </view>
</view>
computed: {
        statusBarStyle() {
        // 这里我将statusBarHeight存储在了vuex内,为在特殊的navbar自定义时调用
        // 建议在在statusBarHeight + 20高度,以适配刘海屏的影响
                return `width: 100%;height: ${this.$store.state.statusBarHeight}rpx;`
        }
}

您需要登录后才可以回帖 登录 | 注册

本版积分规则 致发广告者

发布主题 收藏帖子 返回列表

sitemap| 易语言源码| 易语言教程| 易语言论坛| 易语言模块| 手机版| 广告投放| 精易论坛
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表精易立场!
论坛帖子内容仅用于技术交流学习和研究的目的,严禁用于非法目的,否则造成一切后果自负!如帖子内容侵害到你的权益,请联系我们!
防范网络诈骗,远离网络犯罪 违法和不良信息举报电话0663-3422125,QQ: 793400750,邮箱:wp@125.la
Powered by Discuz! X3.4 揭阳市揭东区精易科技有限公司 ( 粤ICP备12094385号-1) 粤公网安备 44522102000125 增值电信业务经营许可证 粤B2-20192173

快速回复 返回顶部 返回列表