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

news2024/10/6 18:24:36

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

如上图直接使用并不能出现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)
			},

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

 

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

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

相关文章

Excel/WPS超级处理器,提取汉字/字母/数字

在职场工作中&#xff0c;经常会遇到单元格中有汉字&#xff0c;数字&#xff0c;字母三者的自由组合&#xff0c;但往往只需要其中的一者&#xff0c;如何快速提取呢&#xff0c;超级处理器&#xff0c;提供了4个功能可选。 超级处理器下载与安装 1&#xff09;分离字符 将…

【MySQL】事务篇

SueWakeup 个人主页&#xff1a;SueWakeup 系列专栏&#xff1a;学习技术栈 个性签名&#xff1a;保留赤子之心也许是种幸运吧 目录 本系列专栏 1. 什么是事务 2. 事务的特征 原子性&#xff08;Atomicity&#xff09; 一致性&#xff08;Consistency&#xff09; 隔离性&…

【MYSQL】索引机制概述

由于MySQL是作为存储层部署在业务系统的最后端&#xff0c;所有的业务数据最终都要入库落盘&#xff0c;但随着一个项目在线上运行的时间越来越久&#xff0c;数据库中的数据量自然会越来越多&#xff0c;而数据体积出现增长后&#xff0c;当需要从表查询一些数据时&#xff0c…

Argus DBM 一款开源的数据库监控工具,无需部署Agent

开箱即用 无需部署Agent&#xff0c;开箱即用。我们使用JDBC直连您的数据库&#xff0c;输入IP端口账户密码即可。 全平台支持 Argus目前支持对Mysql, PostgreSQL, Oracle等数据库类型的监控&#xff0c;我们也会尽快适配其它数据库&#xff0c;致力于监控所有数据库。我们提…

数仓维度建模

维度建模 数仓建模方法1. 范式建模法&#xff08;Third Normal Form&#xff0c;3NF&#xff09;2. 维度建模法&#xff08;Dimensional Modeling&#xff09;3. 实体建模法&#xff08;Entity Modeling&#xff09; 维度建模1. 事实表事实表种类事务事实表周期快照事实表累计快…

淘宝扭蛋机小程序:扭出惊喜,乐享购物新体验

在快节奏的现代生活中&#xff0c;人们总是在寻找新鲜、有趣的娱乐方式。淘宝扭蛋机小程序应运而生&#xff0c;为您带来前所未有的购物与娱乐结合新体验。在这里&#xff0c;每一次的扭动都充满惊喜&#xff0c;每一次的点击都带来乐趣&#xff0c;让您在购物的同时&#xff0…

VRRP(虚拟路由冗余协议)详解

VRRP-------虚拟路由冗余协议 在一个网络中&#xff0c;要做为一个合格的网络首先就要具备几种冗余&#xff0c;增加网络的可靠性。 这几种冗余分别为&#xff1a;线路冗余&#xff0c;设备冗余&#xff0c;网关冗余&#xff0c;UPS冗余 VRRP该协议就是解决网关冗余的。在二层…

总分410+专业130+国防科技大学831信号与系统考研经验国防科大电子信息与通信工程,真题,大纲,参考书。

好几个学弟催着&#xff0c;总结一下我自己的复习经历&#xff0c;希望大家复习少走弯路&#xff0c;投入的复习正比换回分数。我专业课831信号与系统130&#xff08;感觉比估分要低&#xff0c;后面找Jenny老师讨论了自己拿不准的地方也没有错误&#xff0c;心里最近也这经常回…

基于kintex UltraScale XCKU060的双路QSFP+光纤PCIe 卡

基于kintex UltraScale XCKU060的双路QSFP光纤PCIe 卡 一、板卡概述 本板卡系我司自主研发&#xff0c;基于Xilinx UltraScale Kintex系列FPGA XCKU060-FFVA1156-2-I架构&#xff0c;支持PCIE Gen3 x8模式的高速信号处理板卡&#xff0c;搭配两路40G QSFP接口&#xff…

分类算法——sklearn转换器和估计器(一)

转换器&#xff08;特征工程的父类&#xff09; 实例化&#xff08;实例化的是一个转换器类&#xff08;Transformer&#xff09;&#xff09;调用fit_transform&#xff08;对于文档建立分类词频矩阵&#xff0c;不能同时调用&#xff09; 把特征工程的接口称之为转换器&…

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

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

算法修炼之路之双指针含多道leetcode 经典题目

目录 前言 一&#xff1a;普通双指针 1.经典题目一 283移动0问题 分析 代码实现 2.经典题目二 1089复写0 分析 代码实现 二&#xff1a;解决成环类问题-快慢指针 经典例题一 202快乐数 分析 代码实现 三&#xff1a;左右相遇指针 经典例题一 11 盛最多水的容…

杂货铺 | Linux虚拟机Ubuntu操作系统下设置共享文件夹(以及找不到hgfs文件夹怎么办)

文章目录 &#x1f4da;步骤一&#xff1a;配置共享文件夹&#x1f4da;步骤二&#xff1a;配置挂载环境&#x1f4da;步骤三&#xff1a;解决权限问题&#x1f4da;步骤四&#xff1a;解决重启失效问题 &#x1f4da;步骤一&#xff1a;配置共享文件夹 建立本地共享文件夹&…

TripoSR: Fast 3D Object Reconstruction from a Single Image 论文阅读

1 Abstract TripoSR的核心是一个基于变换器的架构&#xff0c;专为单图像3D重建设计。它接受单张RGB图像作为输入&#xff0c;并输出图像中物体的3D表示。TripoSR的核心包括&#xff1a;图像编码器、图像到三平面解码器和基于三平面的神经辐射场&#xff08;NeRF&#xff09;。…

程序员做副业,AI+公众号爆文,开启赚钱新模式!

给大家介绍一个程序员可做的副业&#xff0c;AI公众号爆文项目。 公众号已经成为了一个巨大的流量池&#xff0c;许多优秀的公众号作者通过发布爆款文章&#xff0c;获得了丰厚的收益。 而作为程序员的你&#xff0c;是否也想过要利用自己的技术优势&#xff0c;在这个领域分…

React Router 5 vs 6:使用上的主要差异与升级指南

React Router 5 的一些API 在 React Router 6 上有时可能找不到&#xff0c;可能会看到如下画面&#xff1a;export ‘useHistory’ was not found in ‘react-router-dom’ … React Router目前有两个大的版本&#xff0c;即React Router 5、6。React Router 6 在设计上更加简…

自然语言处理NLP:文本预处理Text Pre-Processing

大家好&#xff0c;自然语言处理(NLP)是计算机科学领域与人工智能领域中的一个重要方向&#xff0c;其研究能实现人与计算机之间用自然语言进行有效通信的各种理论和方法。本文将介绍文本预处理的本质、原理、应用等内容&#xff0c;助力自然语言处理和模型的生成使用。 1.文本…

CSS实现弹性盒子保持水平和垂直居中

弹性盒子 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head> &…

HarmonyOS实战开发-录音机、如何实现音频录制和播放的功能

介绍 本示例使用audio相关接口实现音频录制和播放的功能&#xff0c;使用mediaLibrary实现音频文件的管理。 相关概念&#xff1a; AudioRecorder&#xff1a;音频录制的主要工作是捕获音频信号&#xff0c;完成音频编码并保存到文件中&#xff0c;帮助开发者轻松实现音频录…

Python人工智能教学之掌握机器学习深度学习并提升实战能力(共72个视频教学+课程资料)云盘下载

人工智能是未来的发展方向&#xff0c;掌握了人工智能&#xff0c;就掌握了钱图。。。 Python人工智能教学之掌握机器学习深度学习并提升实战能力&#xff08;共72个视频教学课程资料&#xff09; 下载地址&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1ryJd5PNx1tLD…