带胶囊按钮的标题是如何实现的

使用uni-app开发小程序经常会遇到胶囊按钮和标题之间融合的问题,因为这样可以大大提高页面的美观和整体性,那么接下来简单拆分步骤看下是如何实现的吧 😁

  1. 可以看到我们设置的标题是在默认标题栏之下的(这不是我们想要的效果 😭),正常状态栏和标题栏都会有个默认高度,这个默认高度是响应式的,应对不同的设备高度也会随之变化 🤔。

  2. 首先我们要到pages.json 👈路由文件中更改配置,将首页的navigationStyle属性的值改为custom,意思是取消默认的原生导航栏,通俗点说我们设置的标题就可以顶上去了 ✊

  3. 来看一下设置好完后的效果吧,是不是有那味了 😍😍😍

  4. 标题二字和搜索框是提前写好的,想着这两个元素该位置比较常用,所以就拿它们俩来举例(想添加其他元素也是同理的),文章的重点不是介绍它们的css样式哈,重点是如何实现在响应式(随设备而改变的)标题栏和状态栏中与胶囊按钮定位齐平的 📏

  5. 上面既然提到标题栏和状态栏是响应式的,所以标题和搜索框的定位位置是不能写死的 😂,那么我们怎样才能动态获取到标题栏和状态栏的位置数据呢,下面就要介绍两个nuiapp中的API了,第一个是uni.getSysemlnfoSync() ,调用这个API可以获取到很多响应式的数据,需要关注的是statusBarHeight的值,该值表示当前设备下的状态栏高度(切记单位是px) 🤔

    第二个API是uni.getMenuButtonBoundingClientRect() ,它可以获取胶囊按钮的多个数据,比如:胶囊按钮自身高度,底部、顶部到状态栏的距离等等(同样单位是px)🤔

  6. 这里标注了一张图小结一下,这样会更方便理解和记忆。一旦我们获取到 1️⃣状态栏高度 2️⃣胶囊按钮高度 3️⃣胶囊按钮上下的边距(上下边距是相同的距离),一切都会变得简单起来 🎉🎉🎉

  7. 基本思路分为三个区域 👇

    • 1️⃣最上面的区域设置和标题栏一样的高度起到占位的作用;
    • 2️⃣第二个区域求出胶囊按钮自身高度加上下边距,再从css中设置居中即可实现标题和搜索框与胶囊按钮齐平;
    • 3️⃣第三个区域是把上面两个区域加起来,这是因为上面的区域都是固定定位会影响文档流,所以在文档流中占位,避免层级的遮挡
  8. 下面就用代码来演示具体是如何实现的吧 😳

    <template><view class="layout"><view class="navbar"><!-- 这里设置一个和状态栏一样高度的占位块 --><view class="statusBar" :style="{height:statusBarHeight + 'px'}"></view><!-- 通过计算得出的胶囊的横向居中位置 --><view class="titleBar" :style="{height:titleBarHeight + 'px'}"><view class="title">标题</view><view class="search"><uni-icons class="icon" type="search" color="#888" size="18"></uni-icons><text class="text">搜索</text></view></view></view><!-- 因为使用了固定定位所以会跳出文档流挡住,这里设置一个状态栏加标题栏的高度即可错开,正常显示其他内容 --><view class="fill" :style="{height:statusBarHeight + titleBarHeight + 'px'}"></view></view>
    </template><script 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 
    </script><style lang="scss" 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>
    

表达能力有限 😭,如有不明白的地方随时私信解答哈📨,创作不易喜欢的同学别忘了点点赞哦 😘😘😘

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/729804.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python学习笔记-Flask实现简单的抽奖程序

1.导入flask包和randint包 from flask import Flask,render_template from random import randint 2.初始化 Flask 应用: app Flask(__name__) 3. 定义英雄列表 hero [黑暗之女,狂战士,正义巨像,卡牌大师,德邦总管,无畏战车,诡术妖姬,猩红收割者,远古恐惧,正义天使,无极剑…

【广度优先搜索】【图论】【并集查找】2493. 将节点分成尽可能多的组

作者推荐 视频算法专题 本文涉及知识点 广度优先搜索 图论 并集查找 LeetCod2493. 将节点分成尽可能多的组 给你一个正整数 n &#xff0c;表示一个 无向 图中的节点数目&#xff0c;节点编号从 1 到 n 。 同时给你一个二维整数数组 edges &#xff0c;其中 edges[i] [ai…

S4---FPGA-K7板级原理图硬件实战

视频链接 FPGA-K7板级系统硬件实战01_哔哩哔哩_bilibili FPGA-K7板级原理图硬件实战 基于XC7K325TFFG900的FPGA硬件实战框图 基于XILINX 的KINTEX-7 芯片XC7K325FPGA的硬件平台&#xff0c;FPGA 开发板挂载了4 片512MB 的高速DDR3 SDRAM 芯片&#xff0c;另外板上带有一个SODIM…

考虑到通信链路中断的(Delay Tolerant Network, DTN)

文章目录 A Study of DTN for Reliable Data Delivery from Space Station to Ground Stationabstractintroduction An Analytical Framework for Disruption of Licklider Transmission Protocol in Mars Communicationsabstract本文贡献 OVERVIEW OF RELIABLE DATA TRANSMISS…

资源池化单集群安装经验总结

登录linux环境通过跳板机用ssh命令连接分配的ip&#xff0c;将准备好的openGauss安装包以及xml文件上传到跳板机用scp命令传到自己的节点。 问题1&#xff1a;预安装包版本问题 解决方法&#xff1a;查看自己机器的系统&#xff0c;至openGauss官网下载正确版本的安装包 open…

Java使用spire.doc操作word文档(合并、插入文字图片和表格、替换书签)

一、引入依赖 <dependency><groupId>e-iceblue</groupId><artifactId>spire.office</artifactId><version>7.5.4</version> </dependency> 二、word操作 1、合并word文档 import com.spire.doc.Document; import com.spir…

目标检测——摩托车头盔检测数据集

一、简介 首先&#xff0c;摩托车作为一种交通工具&#xff0c;具有高速、开放和稳定性差的特点&#xff0c;其事故发生率高&#xff0c;伤亡率排在机动车辆损伤的首位。因此&#xff0c;摩托车乘员头盔对于保护驾乘人员头部安全至关重要。在驾乘突发状况、人体受冲击时&#…

#14vue3生成表单并跳转到外部地址的方式

1、背景 后端返回的json数据中包含一个json数组&#xff0c;此数组中是目标跳转地址所需要的form表单的数据。 2、跳转前的页面 const goto () > {finish.value true;request.post(/xxx/yyy,{zzz: zzz.value}).then(res > {const url res.data.submitUrlconst params…

在线安装MySQL5.7

在线安装MySQL 安装MySQL5.7 yum -y install mysql57-community-release-el7-10.noarch.rpm 若无可用安装包&#xff0c;执行下面这句 wget http://dev.mysql.com/get/mysql57-community-release-el7-7.noarch.rpm 本地安装 yum localinstall -y mysql57-community-releas…

python异常机制

当代码出现异常后底下代码都不会被执行了&#xff0c;也就是程序崩溃了。当然能避免异常的话尽量避免但是有的时候这个是没有办法避免的。 异常处理 &#xff08;注&#xff1a;异常处理是从上往下处理&#xff0c;所以编写代码时要注意&#xff09; 语法 try:可能出现异常…

【漏洞复现】锐捷 EWEB auth 远程命令执行漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

力扣面试经典150 —— 6-10题

力扣面试经典150题在 VScode 中安装 LeetCode 插件即可使用 VScode 刷题&#xff0c;安装 Debug LeetCode 插件可以免费 debug本文使用 python 语言解题&#xff0c;文中 “数组” 通常指 python 列表&#xff1b;文中 “指针” 通常指 python 列表索引 文章目录 6. [中等] 轮转…

MySQL基础-----约束

目录 前言 一、概述 二、约束演示 三、外键约束 1.介绍 2.语法 四、删除/更新行为 1.CASCADE 2.SET NULL 前言 本期我们开始MySQL约束的学习&#xff0c;约束一般是只数据键对本条数据的约束&#xff0c;通过约束我们可以保证数据库中数据的正确、有效性和完整性。 下面…

vite+vue3门户网站菜单栏动态路由控制

门户网站用户端需要分板块展示&#xff0c;板块内容由管理端配置&#xff0c;包括板块名称&#xff0c;访问路径&#xff0c;路由组件&#xff0c;展示顺序&#xff0c;是否展示。如下图所示&#xff1a; 用户访问门户网站时&#xff0c;展示菜单跳转通过板块配置&#xff0c;动…

#微信小程序(布局、渲染层基础知识)

1.IDE&#xff1a;微信开发者工具 2.实验&#xff1a; 3.记录: &#xff08;1&#xff09;view&#xff08;类似于div&#xff09; &#xff08;2&#xff09;块级元素不占满一行且水平均分布局flex,justify(space-around) &#xff08;3&#xff09;滚动<scroll view sc…

从破局到引领,小牛电动确立“领航者”地位

一代人有一代人的使命&#xff0c;一代名企也有一代名企的长征。 当下&#xff0c;高端智能两轮电动车正在跨越鸿沟进入到主流市场中&#xff0c;其中&#xff0c;以小牛电动为代表的新势力正在经历由“颠覆者”到扮演“领航者”角色转型&#xff0c;引领市场顺势而上。 不破…

C++:string的介绍

C语言中&#xff0c;字符串是以\0结尾的一些字符的集合&#xff0c;为了操作方便&#xff0c;C标准库中提供了一些str系列的库函数&#xff0c;但是这些库函数与字符串是分离开的&#xff0c;不太符合面向对象的思想&#xff0c;而且底层空间需要用户自己管理&#xff0c;稍不留…

浅谈去耦电容的作用、选择、布局及其它电容的区别!

在一些文章资料中&#xff0c;去耦电容器被认为是旁路电容器。在其他资料中&#xff0c;去耦电容和旁路电容的区别在于&#xff1a;“旁路电容以输入信号中的干扰为滤波对象&#xff0c;而去耦电容以输出信号的干扰为滤波对象&#xff0c;防止干扰信号返回到输出端。”力量。”…

基于Java的生活废品回收系统(Vue.js+SpringBoot)

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容三、界面展示3.1 登录注册3.2 资源类型&资源品类模块3.3 回收机构模块3.4 资源求购/出售/交易单模块3.5 客服咨询模块 四、免责说明 一、摘要 1.1 项目介绍 生活废品回收系统是可持续发展的解决方案&#xff0c;旨在鼓…

如何远程访问电脑文件?

远程访问电脑文件是当今数字化时代中十分常见且实用的技术。它允许我们从任何地方的计算机或移动设备访问和操作我们的电脑中的文件。无论是远程工作、远程学习、远程协作还是方便地获得自己计算机上的重要文件&#xff0c;远程访问电脑文件都为我们提供了巨大的便利。 在远程访…