做鱫视频网站,网站建设培训视频,专业内涵建设8个方面,绵阳市住房 和城乡建设局网站如今的移动设备有各种不同的屏幕形状#xff0c;如刘海屏、水滴屏等。这些异形屏会影响页面的布局#xff0c;尤其是导航栏和底部栏的显示。通过获取安全区域信息#xff0c;可以确保页面内容不会被异形屏的特殊区域遮挡。
在设计页面顶部导航栏时#xff0c;可以根据 saf…如今的移动设备有各种不同的屏幕形状如刘海屏、水滴屏等。这些异形屏会影响页面的布局尤其是导航栏和底部栏的显示。通过获取安全区域信息可以确保页面内容不会被异形屏的特殊区域遮挡。
在设计页面顶部导航栏时可以根据 safeAreaInsets.top 的值来调整导航栏的位置使其在不同设备上都能正确显示避免被刘海区域遮挡。
例如iPhone14Pro max机型就被挡住了 解决方法如下
1、在page.json里面配置navigationStyle: custom ——导航栏自定义 {path: pages/index/index,style: {navigationBarTitleText: 首页,//使用自定义导航栏navigationStyle: custom,navigationBarTextStyle: white}},
2、设计自定义导航栏布局
templateview classnavbar!-- logo文字 --view classlogoimage classlogo-image src/static/images/logo.png/imagetext classlogo-text新鲜 · 亲民 · 快捷/text/view!-- 搜索条 --view classsearchtext classicon-search搜索商品/texttext classicon-scan/text/view/view
/template3、适配不同机型
获取各机型信息
script setup langts
//获取屏幕边界到安全区域的距离
const { safeAreaInsets } uni.getSystemInfoSync()
console.log(safeAreaInsets);
/script 动态设置样式:style{ paddingTop: safeAreaInsets?.top px }
templateview classnavbar :style{ paddingTop: safeAreaInsets?.top px }!-- logo文字 --view classlogoimage classlogo-image src/static/images/logo.png/imagetext classlogo-text新鲜 · 亲民 · 快捷/text/view!-- 搜索条 --view classsearchtext classicon-search搜索商品/texttext classicon-scan/text/view/view
/template设置完之后就不会挡住啦
