uniapp小程序开发遇到的问题

最新推荐文章于 2024-02-23 08:55:10 发布

M&C_2022

最新推荐文章于 2024-02-23 08:55:10 发布

阅读量520

点赞数

分类专栏：问题集锦文章标签：小程序

本文链接：https://blog.csdn.net/u012043953/article/details/122535495

版权

问题集锦专栏收录该内容

2 篇文章 0 订阅

订阅专栏

引用图片路径

自定义导航栏刘海屏高度适配

在app.vue里使用uni.getSystemInfo() 获取系统信息

根据右上角退出的操作按钮位置，定义导航栏高度和状态栏高度

onLaunch: function() {
            uni.getSystemInfo({
                success: function(e) {
                    // #ifndef MP
                    Vue.prototype.StatusBar = e.statusBarHeight;
                    if (e.platform == 'android') {
                        Vue.prototype.CustomBar = e.statusBarHeight + 50;
                    } else {
                        Vue.prototype.CustomBar = e.statusBarHeight + 45;
                    };
                    // #endif
                    // #ifdef MP-WEIXIN
                    Vue.prototype.StatusBar = e.statusBarHeight;
                    let custom = wx.getMenuButtonBoundingClientRect();
                    Vue.prototype.Custom = custom;
                    Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
                    // #endif
                    // #ifdef MP-ALIPAY
                    Vue.prototype.StatusBar = e.statusBarHeight;
                    Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
                    // #endif
                }
            })
		}

参考colorui的cu-custom自定义导航栏组件

<template>
	<view class="my-nav-bar" :style="{height: navHeight+ 'px',paddingTop: padTop+ 'px',lineHeight: lineHeight+ 'px' }">
		<view class="nav-bar fixed" :style="{height: navHeight+ 'px',lineHeight: lineHeight+ 'px' }">
			<view class="action" @tap="BackPage" v-if="isBack">
				<text class="cuIcon-back"></text>
				<slot name="backText"></slot>
			</view>
			<view class="content">
				<slot name="content"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	export default {
		name: 'my-nav-bar',
		data() {
			return {
				navHeight: '', // 导航高度
				padTop: '',  // 状态栏高度
				lineHeight: ''  // 文字垂直居中
			}
		},
		onReady() {
			this.navHeight = Vue.prototype.CustomBar
			this.padTop = Vue.prototype.StatusBar
			this.lineHeight = this.navHeight -  this.padTop
		},
		methods: {
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style>
	.my-nav-bar .nav-bar{
		width: 100%;
		text-align: center;
	}
</style>