uniapp uview里面的u-navbar结合u-sticky组件的使用

导航栏自定义加需要吸顶产生的问题

如上图直接使用并不能出现tab栏吸顶效果,那是由于u-sticky组件吸顶时与顶部的距离默认为0

那么做如下处理

<u-sticky :offset-top="navbarHeight()">
				<u-tabs :list="helpTabList" active-color="#D01F25" :current="helpTabCurrent"
					@change="helpChange"></u-tabs>
</u-sticky>

 

// 参考uview导航栏的高度,用来设定吸顶时与顶部的距离,h5不需要操作
			navbarHeight() {
				let systemInfo = uni.getSystemInfoSync();
				/* (750 / systemInfo.windowWidth) */
				/* 在uview navBar组件中有一个默认高度,当这个默认高度加上状态栏高度后就是吸顶的位置,由于这两者相加是px,所以最后还需要转为rpx */
				let topHeight=0
				// #ifdef APP-PLUS
				topHeight = 44 + systemInfo.statusBarHeight;
				// #endif
				// #ifdef MP
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				topHeight = height + systemInfo.statusBarHeight
				// #endif
				/* 最后一步将px转为rpx */
				return topHeight * (750 / systemInfo.windowWidth)
			},

经过上述处理就可以出现吸顶效果了

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

智算时代的基础设施如何实现可继承可演进?浪潮云海发布 InCloud OS V8 新一代架构平台

从 2023 年开始持续火爆的 AIGC 正在加速落地应用&#xff0c;为全行业带来生产生活效率的变革与升级。面对数字化转型与智能化转型&#xff0c;对于技术团队来说&#xff0c;既要根据业务与 AI 应用去部署以云为基础的 AI 算力&#xff0c;又要与已有数据和系统&#xff08;甚…

FMC160-两路14位400Msps AD,两路16位400Msps DA FMC子卡模块

FMC160-两路14位400Msps AD&#xff0c;两路16位400Msps DA FMC子卡模块 一、概述   该板卡可实现2路14bit 400Msps AD 和2路16bit 400Msps DA功能&#xff0c;遵循 VITA 57 标准&#xff0c;板卡可以直接与VME/VXS/AMC/VPX/PCI-E FPGA 载板连接使用&#xff0c;用于模拟信…

23种设计模式-Python,优缺点场景与示例代码

今天我将与大家探讨软件开发中至关重要的一些概念——设计模式。无论你是初学者还是经验丰富的开发者&#xff0c;理解这些模式都将对你的编程技能有巨大的提升。 首先什么是设计模式&#xff1f; 设计模式是解决软件设计问题中常见问题的典型解决方案。它们是被多次实践验证…

Unity笔记之Android打包、减小包体之类的问题

打包问题 问题1&#xff1a; 一般大部分问题就是JDK、SDK、NDK之类的问题。现在是其他的问题&#xff0c;之前遇到过&#xff0c;好久没玩android了都忘了。 这试了半天&#xff0c;结果是需要有密钥库。那就给他创建一个填一下就行了 &#xff08;在网上看了半天&#xff…

在vue3中实现pptx、word、excel预览

插件推荐 PPTXjs vue-office 代码 <script setup lang"ts" name"home"> import { computed, nextTick, ref, onMounted } from vue; //引入VueOfficeDocx组件 import VueOfficeDocx from vue-office/docx; //引入VueOfficeExcel组件 import VueOf…

goproxy 简单介绍 及一键安装脚本

goproxy 官网 https://goproxy.cn/ GoProxy 是一项用于 Go 模块的高性能代理服务&#xff0c;旨在为 Go 开发人员提供更快速、更可靠的模块下载体验。它提供以下主要功能&#xff1a; 全球分布式代理服务器: GoProxy 在全球多个地区部署了代理服务器&#xff0c;例如拉斯维加…

ERA拓展之旅:2024香港Web3峰会聚焦全球Web3发展

2024年香港Web3大型峰会是一次令人难忘的体验。这次峰会吸引了来自世界各地的Web3爱好者和从业者齐聚一堂&#xff0c;共同探讨着Web3的未来发展方向与机遇。在这个热情洋溢的氛围中&#xff0c;展现了对Web3的热情&#xff0c;分享彼此的见解和理念&#xff0c;探讨了未来的行…

从吉客云到MySQL通过接口配置打通数据

从吉客云到MySQL通过接口配置打通数据 数据源系统:吉客云 吉客云是基于“网店管家”十五年电商ERP行业和技术积累基础上顺应产业发展需求&#xff0c;重新定位、全新设计推出的换代产品&#xff0c;从业务数字化和组织数字化两个方向出发&#xff0c;以构建流程的闭环为依归&am…

C++设计模式:门面模式(十二)

1、概念与定义 “接口隔离”模式&#xff1a;在组建构建过程中&#xff0c;某些接口之间直接的依赖常常会带来很多问题、甚至根本无法实现。采用添加一层间接&#xff08;稳定&#xff09;接口&#xff0c;来隔离本来相互紧密关联的接口是一种常见的解决方案。 门面设计模式定…

MATLAB 浮点数 转化为 定点数

a fi(v,s,w,f) 一个 fi 对象&#xff0c;其值为 v&#xff0c;符号性为 s&#xff0c;字长为 w&#xff0c;小数长度为 f。 AD9361 a fi(0.707,1,12,11)

Spring Boot 学习(4)——开发环境升级与项目 jdk 升级

各种版本都比较老&#xff0c;用起来也是常出各样的问题&#xff0c;终于找到一个看来不错的新教程&#xff0c;是原先那个教程的升级。遂决定升级一下开发环境&#xff0c;在升级遇到一些问题&#xff0c;摸索将其解决&#xff0c;得些体会记录备查。 最终确定开发环境约束如下…

使用geneHapR进行基因单倍型分析(以vcf文件为例)

前记 在群体基因组学研究中&#xff0c;我们常常需要知道一些位点的变异情况&#xff0c;以便于根据对应的表型信息估算这些位点的效应&#xff0c;同时了解这些位点在不同亚群之间的变化情况。这个时候我们就需要进行单倍型分析(Haplotype Analysis)&#xff0c;单倍型分析是研…

java Web 中小企业门户网站用eclipse定制开发mysql数据库BS模式java编程jdbc

一、源码特点 JSP 中小企业门户网站是一套完善的web设计系统&#xff0c;对理解JSP java 编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,eclipse开发&#xff0c;数据库为Mysql5.0&#xff0c;使…

【读点论文】Segment Anything,视觉界的GPT,可以通过Prompt完成图像实体理解的视觉基础大模型,处理零样本任务

Segment Anything Abstract 我们介绍了Segment Anything&#xff08;SA&#xff09;项目&#xff1a;一种用于图像分割的新任务、模型和数据集。在数据收集循环中使用我们的高效模型&#xff0c;我们构建了迄今为止&#xff08;迄今为止&#xff09;最大的分割数据集&#xf…

HubSpot如何通过自动化和优化客户服务流程?

在当今竞争激烈的市场环境中&#xff0c;提供卓越的客户服务体验已经成为企业赢得客户忠诚、推动业务增长的关键所在。HubSpot&#xff0c;作为一款领先的客户关系管理软件&#xff0c;通过自动化和优化客户服务流程&#xff0c;为企业带来了革命性的服务体验提升。 HubSpot通…

请核对您的姓名、证件号码、有效期和年限是否选择正确,请勿使用挂失过的身份证

问题 请核对您的姓名、证件号码、有效期和年限是否选择正确&#xff0c;请勿使用挂失过的身份证 详细问题 笔者在专利业务办理系统进行新用户注册&#xff0c;注册时间为晚上大概22&#xff1a;00以后。注册时已核对姓名、证件号码、有效期和年限&#xff0c;已确保正确&…

高质量ChatGPT Prompts 精选

通用超级 Prompt GPT4实用。通用超级 prompt &#xff0c;根据你想要的输出和你的反馈&#xff0c;自动使用相应的专家角色帮你解决问题。如果需要升级ChatGPT Plus&#xff0c;可以参考教程 升级 GPT4.0 保姆教程 您是一位具有多领域专长的专家级ChatGPT提示工程师。在我们…

web服务器是如何运行的?tomcat基本原理

tomcat基本流程 tomcat在启动时将webapps下的每个项目中的web.xml读取&#xff0c;获取相关信息。tomcat只关心Servlet 程序、Filter 过滤器、Listener 监听器&#xff0c;不关心其他类。 tomcat接收到请求后会将请求报文转换成一个httpServletRequest对象&#xff0c;包含请求…

分类预测 | Matlab实现WOA-LSSVM鲸鱼算法优化最小二乘支持向量机数据分类预测

分类预测 | Matlab实现WOA-LSSVM鲸鱼算法优化最小二乘支持向量机数据分类预测 目录 分类预测 | Matlab实现WOA-LSSVM鲸鱼算法优化最小二乘支持向量机数据分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 1.Matlab实现WOA-LSSVM鲸鱼算法优化最小二乘支持向量机数据…

.NET JWT入坑

前言 JWT (JSON Web Token) 是一种安全传输信息的开放标准&#xff0c;由Header、Payload和Signature三部分组成。它主要用于身份验证、信息交换和授权。JWT可验证用户身份&#xff0c;确保访问权限&#xff0c;实现单点登录&#xff0c;并在客户端和服务器之间安全地交换信息…