设计师发布作品的网站,免备案网站,山河建设集团有限公司的网站,成都商城类网站设计使用uni-app开发小程序经常会遇到胶囊按钮和标题之间融合的问题#xff0c;因为这样可以大大提高页面的美观和整体性#xff0c;那么接下来简单拆分步骤看下是如何实现的吧 #x1f601; 可以看到我们设置的标题是在默认标题栏之下的#xff08;这不是我们想要的效果 …使用uni-app开发小程序经常会遇到胶囊按钮和标题之间融合的问题因为这样可以大大提高页面的美观和整体性那么接下来简单拆分步骤看下是如何实现的吧 可以看到我们设置的标题是在默认标题栏之下的这不是我们想要的效果 正常状态栏和标题栏都会有个默认高度这个默认高度是响应式的应对不同的设备高度也会随之变化 。 首先我们要到pages.json 路由文件中更改配置将首页的navigationStyle属性的值改为custom意思是取消默认的原生导航栏通俗点说我们设置的标题就可以顶上去了 ✊ 来看一下设置好完后的效果吧是不是有那味了 标题二字和搜索框是提前写好的想着这两个元素该位置比较常用所以就拿它们俩来举例想添加其他元素也是同理的文章的重点不是介绍它们的css样式哈重点是如何实现在响应式随设备而改变的标题栏和状态栏中与胶囊按钮定位齐平的 上面既然提到标题栏和状态栏是响应式的所以标题和搜索框的定位位置是不能写死的 那么我们怎样才能动态获取到标题栏和状态栏的位置数据呢下面就要介绍两个nuiapp中的API了第一个是uni.getSysemlnfoSync() 调用这个API可以获取到很多响应式的数据需要关注的是statusBarHeight的值该值表示当前设备下的状态栏高度切记单位是px 第二个API是uni.getMenuButtonBoundingClientRect() 它可以获取胶囊按钮的多个数据比如胶囊按钮自身高度底部、顶部到状态栏的距离等等同样单位是px 这里标注了一张图小结一下这样会更方便理解和记忆。一旦我们获取到 1️⃣状态栏高度 2️⃣胶囊按钮高度 3️⃣胶囊按钮上下的边距上下边距是相同的距离一切都会变得简单起来 基本思路分为三个区域 1️⃣最上面的区域设置和标题栏一样的高度起到占位的作用2️⃣第二个区域求出胶囊按钮自身高度加上下边距再从css中设置居中即可实现标题和搜索框与胶囊按钮齐平3️⃣第三个区域是把上面两个区域加起来这是因为上面的区域都是固定定位会影响文档流所以在文档流中占位避免层级的遮挡 下面就用代码来演示具体是如何实现的吧 templateview classlayoutview classnavbar!-- 这里设置一个和状态栏一样高度的占位块 --view classstatusBar :style{height:statusBarHeight px}/view!-- 通过计算得出的胶囊的横向居中位置 --view classtitleBar :style{height:titleBarHeight px}view classtitle标题/viewview classsearchuni-icons classicon typesearch color#888 size18/uni-iconstext classtext搜索/text/view/view/view!-- 因为使用了固定定位所以会跳出文档流挡住这里设置一个状态栏加标题栏的高度即可错开正常显示其他内容 --view classfill :style{height:statusBarHeight titleBarHeight px}/view/view
/templatescript setup
import { ref } from vue;
//获取到状态栏高度
let SYSTEM_INFO uni.getSystemInfoSync()
let statusBarHeight ref(SYSTEM_INFO.statusBarHeight)
//获取到胶囊按钮自身高度上下两个边距高度再从css中设置居中即可实现标题和搜索框与胶囊按钮齐平
let {top, height} uni.getMenuButtonBoundingClientRect()
let titleBarHeight height (top - statusBarHeight.value) * 2
/scriptstyle langscss scoped
.layout{.navbar{position: fixed; //采用固定定位top: 0;left: 0;width: 100%;z-index: 10;background:linear-gradient(to bottom, transparent, #fff 400rpx),linear-gradient(to right, #beecd8, #F4E2D8);.titleBar{padding: 0 30rpx ;display: flex;align-items: center;.title{font-size: 22px;font-weight: 700;color: #000;}.search{width: 220rpx;height: 50rpx;border-radius: 60rpx;background: rgba(255, 255, 255, 0.4);border: 1px solid #fff;margin-left: 30rpx;color:#999;font-size: 28rpx;display: flex;align-items: center;.icon{margin-left: 5rpx;}.text{padding-left: 10rpx;}}}}.fill{}
}
/style表达能力有限 如有不明白的地方随时私信解答哈创作不易喜欢的同学别忘了点点赞哦
