uni-app 布局遇到的问题

1、头部

先看一遍导航栏开发指南，原生的头部无法满足一些需求比如：插入用户头像点击头像显示侧边栏，如果需要用hello-app中的自定义头像要注意如果设为fixed，组件在父节点占用的位置会变为空，需要修改组件最外层的节点样式，让它一直占用44px。

.uni-navbar{width: 100%;height: 44px;/* #ifdef MP */height: 64px;/* #endif *//* #ifdef APP-PLUS */height: calc(44px + var(--status-bar-height));/* #endif */
}

使用自定义头部前要把原生的头部去除：

{"path" : "pages/formPage/login","style" : {"navigationBarTitleText": "登录","navigationStyle": "custom","app-plus": {"titleNView": false}}
}

上面设置后，会发现头部消失了，但是自定义的头部顶到手机的状态栏上了
需要再修改uni-nav-bar的样式

.uni-navbar__content {display: block;position: relative;width: 100%;background-color: #fff;overflow: hidden;/* #ifdef MP */padding-top: 20px;/* #endif *//* #ifdef APP-PLUS */padding-top: var(--status-bar-height);/* #endif */
}

2、底部

uni-app原生的底部不会被侧边栏遮挡，你可以重写一个自定义的底部，但是原生底部有许多有用的接口比如：显示红点和数字、如果不想重写、不想放弃这些接口、又觉得显示侧边栏时显示底部很难看的话可以选择在侧边栏显示时隐藏原生底部。

watch:{visible(val){//只有小程序和挨批评端会出现drawer遮挡的问题// #ifndef H5if(val){uni.hideTabBar();}else{uni.showTabBar();}// #endif}
}

3、scroll-view

scroll-view使用100vh要注意原生的组件不包括在100vh中，如果使用了自定义的头部和底部需要计算减去，如果是小程序或者app需要减去手机的状态栏高度。

.tabBar-scroll-y{/** 44px：自定义头部高度* 20px：小程序手机状态栏高度* var(--status-bar-height)：app手机状态栏高度* */height: calc(100vh - 44px);/*H5*//* #ifdef MP */height: calc(100vh - 44px - 20px);/* #endif *//* #ifdef APP-PLUS */height: calc(100vh - 44px - var(--status-bar-height));/* #endif */
}

4、下拉刷新

{"path" : "pages/tabBar/community/community","style" : {"navigationBarTitleText": "社区","navigationStyle": "custom","app-plus": {"titleNView": false},"enablePullDownRefresh": true}
},

注意scroll-view无法触发实现下拉刷新

uni-app 布局遇到的问题相关推荐

切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
Android开发之Android studio4.1查看app布局的方法 | 使用布局检查器和布局验证工具调试布局
老套路先上图: 老版本和新版本查看方法不一样,我这个是4.1的版本.但是大部分菜单都差不多所以先看我这个版本查看布局方法如下: 选择查看app布局的进程即可总结: 菜单栏选择Tools-Layout ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
uni App+H5 实现人脸识别
uni App+H5 实现人脸识别通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...
uni app 视频播放功能
视频播放功能,需求:编译成纯h5网页,运行在任意容器里,如浏览器.安卓原生和iOS等媒体组件video 首先使用video组件,然后高度需要自己设置 uni.createVideoContext 官 ...