php做网站需要什么/网络推广的优势有哪些
预期结果:某button fixed 到页面底部,进入该页面时,正常显示button
实际结果:小米13pro,首次进入页面,button不显示。再次进入时,则正常展示
左侧为小米手机第一次进入。
遇到bug的解决思路:
1.定位问题原因
2.寻求问题解决方案
一、定位问题原因
- 尝试使用flex布局,和fixed布局bug一致
- 去掉flex布局与fixed布局,不使用任何position和flex布局,元素可以正常展示,初步定位到是由于布局问题引起,但此处必须使用定位布局,此路不通 pass
- 在多个机型(iPhone16,iPhone XR, Vivo,红米)下并没有发现该问题,只有小米手机有问题,定位为兼容性bug
- 将fixed的bottom属性,由0 改为固定的60, 发现bug的时候,底部button是向上移动的。
由此定位为:小米机型首次进入页面时,某高度参数获取错误
二、寻求问题解决方案
- 由于该页面的层级嵌套太深,尝试将该页面的跳转路径的深度扁平化处理,貌似可以解决该问题,但代码改动量太大。遂止
- 在进入该页面时,redirectTo(重定向)一次到页面自己的路径,这样可以解决button不展示的问题,但是对用户体验不是很友好(每次进入该页面都会闪一下)。因为无法判断该用户的机型是否有该bug,没有bug的手机无需做该操作。
- 由于使用真机调试时发现,底部button的实际高度,其实没有被挤压,只是定位的位置不对。所以换思路,使用top进行定位。但发现定位位置仍有问题
- 使用taro的选择权查询对象,获取该元素的高度。调试中发现,获取该元素的高度在bug时,比正常高度要低。buttonWrapperHeight
解决思路:手动算一下底部button的高度,如果实际获取的高度 < 手动算的最小高度时,则定位中使用手动算的最小高度
:style="{ top: `${getSystemInfoSync().windowHeight - buttonWrapperHeight}px` }"// 底部按钮wrapper高度
const buttonWrapperHeight = ref(0)
onMounted(async () => {// 获取底部列表的接口await getList('111')// 创建一个选择器查询对象const query = Taro.createSelectorQuery()// 选择底部按钮的元素,并获取其高度query.select('#verifyButtonWrapper').boundingClientRect().exec((res) => {const rect = res[0]if (rect) {const calcActualHeight = 75 + List.value.length > 0 ? piplList.value.length * 20 : 0buttonWrapperHeight.value = rect.height > calcActualHeight ? rect.height : calcActualHeight}})
})
相关文章:

微信小程序底部button,小米手机偶现布局错误的bug
预期结果:某button fixed 到页面底部,进入该页面时,正常显示button 实际结果:小米13pro,首次进入页面,button不显示。再次进入时,则正常展示 左侧为小米手机第一次进入。 遇到bug的解决思路&am…...

【计组】复习题
冯诺依曼型计算机的主要设计思想是什么?它包括哪些主要组成部分? 主要设计思想: ①采用二进制表示数据和指令,指令由操作码和地址码组成。 ②存储程序,程序控制:将程序和数据存放在存储器中,计算…...

Apache Maven 标准文件目录布局
Apache Maven 采用了一套标准的目录布局来组织项目文件。这种布局提供了一种结构化和一致的方式来管理项目资源,使得开发者更容易导航和维护项目。理解和使用标准目录布局对于有效的Maven项目管理至关重要。本文将探讨Maven标准目录布局的关键组成部分,并…...

Android 功耗分析(底层篇)
最近在网上发现关于功耗分析系列的文章很少,介绍详细的更少,于是便想记录总结一下功耗分析的相关知识,有不对的地方希望大家多指出,互相学习。本系列分为底层篇和上层篇。 大概从基础知识,测试手法,以及案例…...

【Xbim+C#】创建圆盘扫掠IfcSweptDiskSolid
基础回顾 https://blog.csdn.net/liqian_ken/article/details/143867404 https://blog.csdn.net/liqian_ken/article/details/114851319 效果图 代码示例 在前文基础上,增加一个工具方法: public static IfcProductDefinitionShape CreateDiskSolidSha…...

IntelliJ+SpringBoot项目实战(四)--快速上手数据库开发
对于新手学习SpringBoot开发,可能最急迫的事情就是尽快掌握数据库的开发。目前数据库开发主要流行使用Mybatis和Mybatis Plus,不过这2个框架对于新手而言需要一定的时间掌握,如果快速上手数据库开发,可以先按照本文介绍的方式使用JdbcTemplat…...

利用oss进行数据库和网站图片备份
1.背景 由于网站迁移到香港云 服务器,虽然便宜,但是宿主服务器时不时重启,为了预防不可控的因素导致网站资料丢失,所以想到用OSS 备份网站数据,bucket选择在香港地区创建,这样和你服务器传输会更快。 oss…...

Excel - VLOOKUP函数将指定列替换为字典值
背景:在根据各种复杂的口径导出报表数据时,因为关联的表较多、数据量较大,一行数据往往会存在三个以上的字典数据。 为了保证导出数据的效率,博主选择了导出字典code值后,在Excel中处理匹配字典值。在查询百度之后&am…...

实验室管理平台:Spring Boot技术构建
3系统分析 3.1可行性分析 通过对本实验室管理系统实行的目的初步调查和分析,提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本实验室管理系统采用SSM框架,JAVA作为开发语言&a…...

操作系统进程和线程——针对实习面试
目录 操作系统进程和线程什么是进程和线程?进程和线程的区别?进程有哪些状态?什么是线程安全?如何实现线程安全?什么是线程安全?如何实现线程安全? 进程间的通信有哪几种方式?什么是…...

使用 cnpm 安装 Electron,才是正确快速的方法
当然,下面是总结的几种安装 Electron 的方法,包括使用 npm 和 cnpm,以及一些常见的问题解决技巧。 ### 1. 使用 npm 安装 Electron #### 步骤 1: 初始化项目 在你的项目目录中初始化一个新的 Node.js 项目: bash npm init -y …...

【人工智能】PyTorch、TensorFlow 和 Keras 全面解析与对比:深度学习框架的终极指南
文章目录 PyTorch 全面解析2.1 PyTorch 的发展历程2.2 PyTorch 的核心特点2.3 PyTorch 的应用场景 TensorFlow 全面解析3.1 TensorFlow 的发展历程3.2 TensorFlow 的核心特点3.3 TensorFlow 的应用场景 Keras 全面解析4.1 Keras 的发展历程4.2 Keras 的核心特点4.3 Keras 的应用…...

【第八课】Rust中的函数与方法
目录 前言 函数指针 函数当作另一个函数的参数 函数当作另一个函数的返回值 闭包 方法 关联函数 总结 前言 在前面几课中,我们都或多或少的接触到了rust中的函数,rust中的函数和其他语言的并没有什么不同,简单的语法不在这篇文章中赘…...

c语言学习25二维数组
1 二维数组 1.1二维数组认识 二维数组本质是一个数组。 举例: int a[10][3] 数组名 a; 元素个数10; 数组元素类型:int [3]; 数组元素下标:0~9 这是一个数组,有十个元素,每个元…...

如何理解Lua 使用虚拟堆栈
虚拟堆栈的基本概念 Lua使用虚拟堆栈来实现Lua和C(或其他宿主语言)之间的交互。这个虚拟堆栈是一个数据结构,用于存储Lua的值,如数字、字符串、表、函数等。它在Lua状态机(lua_State)内部维护,为…...
【倍数问题——同余系】
题目 代码 #include <bits/stdc.h> using namespace std; const int N 1e5 10, M 1e3 10; int maxx[M][4]; void consider(int r, int x) {if(x > maxx[r][1]){maxx[r][3] maxx[r][2];maxx[r][2] maxx[r][1];maxx[r][1] x;}else if(x > maxx[r][2]){maxx[…...

「San」监听DOM变化的方法
在 San框架 中监听组件内部字体大小并调整宽度,可以结合 自定义事件 或 数据绑定 来实现动态调整。San 框架没有直接的监听 DOM 尺寸变化的内置方法,但可以通过以下步骤实现: 方法一:使用 ResizeObserver 监听字体变化 在组件的 …...

如何选择服务器
如何选择服务器 选择服务器时应考虑以下几个关键因素: 性能需求。根据网站的预期流量和负载情况,选择合适的处理器、内存和存储容量。考虑网站是否需要处理大量动态内容或高分辨率媒体文件。 可扩展性。选择一个可以轻松扩展的服务器架构,以便…...

嵌入式驱动面试总结
操作系统: 中断的处理流程,中断处理需要注意些什么 软中断和硬中断区别 linux驱动用过那些锁,信号量,互斥锁 自旋锁和互斥锁的区别 二值信号量和互斥信号量有什么区别 进程锁怎么实现的,说一下流程; …...

Uniapp 简单配置鸿蒙
Uniapp 简单配置鸿蒙 前言下载并配置鸿蒙IDEHbuilder X 配置基本的信息生成相关证书登录官网获取证书IDE配置证书添加调试设备可能出现的问题前言 如今鸿蒙的盛起,作为多端开发的代表也是开始兼容鸿蒙应用的开发,接下来我将介绍如何在uniapp中配置鸿蒙。 注意:hbuilder X的…...

线程池的实现与应用
一、线程池 一种线程使用模式。线程过多会带来调度开销,进而影响缓存局部性和整体性能。而线程池维护着多个线程,等待着监督管理者分配可并发执行的任务。这避免了在处理短时间任务时创建与销毁线程的代价。线程池不仅能够保证内核的充分利用,…...

基于Java Springboot单位考勤系统
一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术:Html、Css、Js、Vue、Element-ui 数据库:MySQL 后端技术:Java、Spring Boot、MyBatis 三、运行环境 开发工具:IDEA/eclipse 数据…...

近源渗透|HID ATTACK从0到1
前言 对于“近源渗透”这一术语,相信大家已经不再感到陌生。它涉及通过伪装、社会工程学等手段,实地侵入企业办公区域,利用内部潜在的攻击面——例如Wi-Fi网络、RFID门禁、暴露的有线网口、USB接口等——获取关键信息,并以隐蔽的…...

【linux】插入新硬盘如何配置:格式化、分区、自动挂载(Ubuntu)
文章目录 具体方法GPT分区表(GUID Partition Table)(建议都用这种分区方法)MBR分区表方法(最大支持2TB分区)(Master Boot Record) 附加:如何查看硬盘的型号另外ÿ…...

YOLOv8-ultralytics-8.2.103部分代码阅读笔记-block.py
block.py ultralytics\nn\modules\block.py 目录 block.py 1.所需的库和模块 2.class DFL(nn.Module): 3.class Proto(nn.Module): 4.class HGStem(nn.Module): 5.class HGBlock(nn.Module): 6.class SPP(nn.Module): 7.class SPPF(nn.Module): 8.class C1(nn.M…...

代码随想录算法训练营第五十三天|Day53 图论
字符串接龙 https://www.programmercarl.com/kamacoder/0110.%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%8E%A5%E9%BE%99.html 思路 #include <stdio.h> #include <stdlib.h> #include <string.h>#define MAX 1000 // 假设最大字符串数 #define WORD_LENGTH 100 // 假…...

LeetCode:203.移除链表元素
跟着carl学算法,本系列博客仅做个人记录,建议大家都去看carl本人的博客,写的真的很好的! 代码随想录 LeetCode:203.移除链表元素 给你一个链表的头节点 head 和一个整数 val ,请你删除链表中所有满足 Node.…...

知识见闻 - 数学: 均方根 Root Mean Square
What is Root Mean Square (RMS)? 在统计学上,均方根(RMS)是均方的平方根,而均方是一组数值的平方的算术平均数。均方根也称为二次均值,是指数为 2 的广义均值的一种特例。均方根也被定义为基于一个周期内瞬时值的平方…...

机器硬件调优
grub参数 ipv6.disable1 ipv6.autoconf0 intel_pstatedisable nohzoff idlepoll intel_idle.max_cstate0 processor.max_cstate0 mceignore_ce nmi_watchdog0 transparent_hugepagenever pcie_aspm.policyperformance audit0 irqaffinity0 nosoftlockup grub2-mkconfig -o /bo…...

如何更改手机GPS定位
你是否曾想过更改手机GPS位置以保护隐私、玩游戏或访问受地理限制的内容?接下来我将向你展示如何使用 MagFone Location Changer 更改手机GPS 位置!无论是在玩Pokmon GO游戏、发布社媒贴子,这种方法都快速、简单且有效。 第一步:下…...