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-PLUStopHeight = 44 + systemInfo.statusBarHeight;// #endif// #ifdef MPlet height = systemInfo.platform == 'ios' ? 44 : 48;topHeight = height + systemInfo.statusBarHeight// #endif/* 最后一步将px转为rpx */return topHeight * (750 / systemInfo.windowWidth)},

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

 

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

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

相关文章

SGI_STL空间配置器源码剖析(六)deallocate函数

deallocate函数是内存释放函数。源码及注释如下&#xff1a; /* __p may not be 0 */static void deallocate(void* __p, size_t __n) // __p指向要回收的内存起始地址&#xff0c;__n表示其大小{if (__n > (size_t) _MAX_BYTES)// 大于128字节&#xff0c;普通方式开辟和回…

电商技术揭秘22:智能仓储与物流优化(上)

相关系列文章 电商技术揭秘一&#xff1a;电商架构设计与核心技术 电商技术揭秘二&#xff1a;电商平台推荐系统的实现与优化 电商技术揭秘三&#xff1a;电商平台的支付与结算系统 电商技术揭秘四&#xff1a;电商平台的物流管理系统 电商技术揭秘五&#xff1a;电商平台…

AutoCAD之DWF三维信息提取---linux编译篇

1. 权限 1.1 给文件添加执行权限 chmod x autogen.sh1.2.给当前文件下的所有文件改变为读写执行权限 chmod 777 * -R 2.环境安装 2.1安装automake 1.4.1 安装链接 安装中遇到的问题及解决 2.2安装autoconf 2.3 安装libtool 2.4 安装Cmake(CMake包含) cmake安装在cent…

【IDEA】JRebel LS client not configured

主要原因就是因为 jrebel 的版本跟 idea的版本对不上&#xff0c;或者说jrebel的版本比idea的版本还高&#xff0c;导致出现该错误 查看idea版本 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/a7ba43e6822947318cdb0d0e9d8d65e9.png 获取jrebel 版本 如何处理 …

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

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

Fortnite与Roblox的市场竞争力分析

很多媒体大肆宣扬Fortnite和Roblox是元宇宙UGC平台巨头的竞争对手,但实际上它们似乎各自占据了UGC游戏市场的不同部分。对于Fortnite来说,主要是射击游戏;而对于Roblox来说,则是其他所有类型的游戏。 至少在目前,这两个平台在市场定位和用户群体上有着明显的差异,它们的…

【论文研读】Geometric Deep Learning on Molecular Representations

Geometric Deep Learning on Molecular Representationshttps://arxiv.org/pdf/2107.12375.pdf 一、Background 随着网络时代的发展&#xff0c;生活中产生的数据量越来越多&#xff0c;但数据大体分为两类&#xff1a;欧氏数据、非欧氏数据。如图为两类常见的数据&#xff0c…

视频秒播优化实践

本文字数&#xff1a;2259字 预计阅读时间&#xff1a;10分钟 视频起播时间&#xff0c;即首帧时间&#xff0c;是视频类应用的一个重要核心指标&#xff0c;也是影响用户观看体验的核心因素之一。如果视频要加载很久才能开始播放&#xff0c;用户放弃播放甚至离开 App 的概率都…

采集某新闻网资讯网站保存PDF

网址&#xff1a;融资总额近3亿美元、药明康德押注&#xff0c;这家抗衰老明星公司有何过人之处-36氪 想要抓取文章内容&#xff0c;但是找不到啊&#xff0c;可能是文字格式的问题&#xff0c;也可能文章内容进行了加密。 在元素中查看&#xff0c;window.initialState返回的就…

QQ 邮箱使用 SMTP 发送邮件报错:550 The From header is missing or invalid

文章目录 场景描述问题排查根据提示查看原因查看封装的 message 个人简介 场景描述 QQ 邮箱使用 SMTP 发送邮件报错&#xff1a;550 The From header is missing or invalid&#xff1a; 失败原因&#xff1a;(550, bThe "From" header is missing or invalid. Ple…

数据仓库—主数据管理

在当今信息爆炸的时代&#xff0c;数据已经成为企业最重要的资产之一。然而&#xff0c;许多企业在管理数据时面临着挑战&#xff0c;其中之一就是处理不同系统中的数据不一致问题。主数据管理&#xff08;Master Data Management&#xff0c;MDM&#xff09;就是为了解决这一问…

JVM修炼之路【11】- 解决内存溢出、内存泄漏 以及相关案例

前面的10篇 都是基础的知识&#xff0c;包括类加载的过程 类加载的细节&#xff0c;jvm内存模型 垃圾回收 等等&#xff0c; 这一篇我们开始实战了解一下 各种疑难杂症&#xff1a;怎么监控 怎么发现 怎么解决 内存溢出 内存泄漏 这两个概念在垃圾回收器里面已经讲过了&#…

云原生(八)、Kubernetes基础(一)

K8S 基础 # 获取登录令牌 kubectl create token admin --namespace kubernetes-dashboard1、 NameSpace Kubernetes 启动时会创建四个初始名字空间 default:Kubernetes 包含这个名字空间&#xff0c;以便于你无需创建新的名字空间即可开始使用新集群。 kube-node-lease: 该…

【学习】VScode修改侧边栏大小。

侧边栏不可以直接更改&#xff0c;所以先缩放整体界面&#xff0c;再改变工作区大小。 缩放整体界面&#xff1a; Ctrl 或 Ctrl - 。 也可以直接使用如下代码&#xff1a; Ctrl Shifit p 打开搜索 settings &#xff0c;选择下图第一个。 然后嵌入如下代码&#xff1a…

股票价格预测 | Python使用GAN预测股票价格

文章目录 效果一览文章概述代码设计效果一览 文章概述 生成对抗网络(GAN)是一种强大的机器学习模型,用于生成以假乱真的数据。然而,使用GAN来预测股票价格可能会面临以下挑战: 数据可用性:GAN需要大量的数据进行训练,以便生成准确的输出。对于股票价格预测,历史股票价…

前端响应式布局方式及其优缺点大全

前端响应式布局方式及其优缺点大全 1. 什么是响应式布局2. 响应式布局方式有哪些1. 媒体查询布局2. Flex弹性布局3. 百分比布局4. vw/vh响应式布局5. rem响应式布局 3. 结语 1. 什么是响应式布局 对于不同宽度和高度的屏幕&#xff0c;通过一套代码使页面样式根据屏幕尺寸自适应…

OpenHarmony开发——Makefile方式组织编译的库移植

以yxml库为例&#xff0c;其移植过程如下文所示。 源码获取 从仓库获取yxml源码&#xff0c;其目录结构如下表&#xff1a; 表1 源码目录结构 名称描述yxml/bench/benchmark相关代码yxml/test/测试输入输出文件&#xff0c;及测试脚本yxml/Makefile编译组织文件yxml/.gitat…

基于机器学习的识别准确率不高问题

识别准确率不高&#xff0c;可能存在以下几个方面的原因&#xff1a; 数据质量&#xff1a;数据集中可能存在错误、不完整或与实际情况偏离的情况。数据清洗和预处理是解决这个问题的关键。 数据不平衡&#xff1a;某些类别的样本过多&#xff0c;而其他类别的样本过少&#x…

sklearn的LabelEncoder 遇到新值的解决办法

问题&#xff1a;sklearn的LabelEncoder函数遇到新值报错 sklearn的LabelEncoder函数&#xff0c;在fit结束后&#xff0c;对dataframe数据进行transform的时候&#xff0c;如果遇到了没在fit时编码规则里的新值&#xff0c;会出现代码报错&#xff0c;不同于spark的LabelEnco…

SQL中的INNER JOIN与笛卡尔积:区别与实例详解

SQL中的INNER JOIN与笛卡尔积&#xff1a;区别与实例详解 引言1. 笛卡尔积&#xff08;Cartesian Product&#xff09;定义与概念结果特点 2. INNER JOIN定义与概念结果特点 3. 区别与比较4. 实例演示5. 总结 引言 在SQL查询中&#xff0c;INNER JOIN和笛卡尔积&#xff08;Car…