uniapp开发中遇见的问题

原创已于 2022-10-28 09:11:55 修改 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

于 2022-10-27 23:01:45 首次发布

前端专栏收录该内容

18 篇文章

订阅专栏

博客分享了uni-app开发中遇到的几个问题及解决办法。一是数据下滑到最后显示不全，需调整到整条数据显示；二是要计算手机头部安全区高度，获取状态栏高度方便后续操作；三是可在pages.json的style里设置去除Uniapp自带头部导航栏。

今天在开发中遇到几个问题

1、数据下滑到最后一条，结果内容显示不全

像这种情况，我的办法是使用

padding-bottom

一直调到整条数据显示为止

2、计算手机头部安全区的高度

因为每个手机的头部的安全区不同，所以我们要获取到每个手机的状态栏高度，方便后期做一些动作

代码如下：

<view class="status_bar">
			
</view>            //html代码

onLoad() {
			this.GetStatusBarHeight();
		}
//OnLoad代码

methods: {
			GetStatusHeight(){
				let that = this;
				uni.getSystemInfo({
					success:function(res){
						res.statusBarHeight		//状态栏的高度
						console.log(res.statusBarHeight);
					}
				})
			}
},
//methods代码

	.status_bar{
		height: var(--status-bar-height);		//这里是状态栏css变量
		width: 100%;
		background-color: #0BCE56;
	}
//css代码

3、去除Uniapp自带的头部导航栏

在pages.json里面的style里面加上

"app-plus": {
					"titleNView": false,
}

至此，官方带的头部导航栏去除成功