uniapp获取屏幕宽度时 获取不到移动设备中内容盒子宽度

首先 :我使用的是uniapp+ vue3语法:
问题: 我出现这个问题是IOS 设备发现的,data.boxWidth为0
代码:

 const initCreated = () => {const query = uni.createSelectorQuery().in(instance.proxy);const el = query.select("#readView").boundingClientRect(rect => {console.log('rect.width', rect.width)if (rect.width){const width = rect.width - 20;// const height = rect.height - 20;data.boxWidth = width;// data.height = height;}}).exec();console.log('data.boxWidth', data.boxWidth)}

原因:
使用了 uni.createSelectorQuery() 来获取元素的宽度,然后在回调函数中设置 data.boxWidth 的值。然而,uni.createSelectorQuery() 方法是异步的,也就是说,它会在后台进行元素查询,然后在执行 .exec() 后才会触发回调函数。

因此,在你的代码中,第一个 console.log(‘data.boxWidth’, data.boxWidth) 实际上会在异步操作之前执行,所以它会打印出初始值(可能是 undefined 或者之前的值)。而第二个 console.log(‘rect.width’, rect.width) 是在回调函数中,它会在异步操作完成后执行,所以它能够正确地获取到元素的宽度。

解决:
别单独封装一个函数了,直接在使用盒子宽度的代码处(执行操作),就放在' // 在这里进行需要使用盒子宽度的操作'这里执行获取到宽度后的代码就行。

这样可以确保在正确获取到宽度后再进行后续操作,避免了异步操作的影响。

const initCreated = () => {const query = uni.createSelectorQuery().in(instance.proxy);query.select("#readView").boundingClientRect(rect => {console.log('rect.width', rect.width)if (rect.width) {const width = rect.width - 20;// const height = rect.height - 20;data.boxWidth = width;// data.height = height;console.log('data.boxWidth', data.boxWidth);// 在这里进行需要使用盒子宽度的操作}}).exec();
}

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

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

相关文章

Dockerfile定制Tomcat镜像

Dockerfile中的打包命令 FROM : 以某个基础镜像作为此镜像的基础 RUN : RUN后面跟着linux常用命令,如RUN echo xxx >> xxx,注意,RUN 不能用于执行命令,因为每个RUN都是独立运行的,RUN 的cd对镜像中的…

PHP8的循环控制语句-PHP8知识详解

我们在上一节讲的是条件控制语句,本节课程我们讲解循环控制语句。循环控制语句中,主要有for循环、while循环、do...while循环和foreach循环。 在编写代码时,经常需要反复运行同一代码块。我们可以使用循环来执行这样的任务,而不是…

利用MMPose进行姿态估计(训练、测试全流程)

前言 MMPose是一款基于PyTorch的姿态分析开源工具箱,是OpenMMLab项目成员之一,主要特性: 支持多种人体姿态分析相关任务:2D多人姿态估计、2D手部姿态估计、动物关键点检测等等更高的精度和更快的速度:包括“自顶向下”…

C++中修改存储在数组中的数据

C中修改存储在数组中的数据 在前一个程序清单中,并未将用户定义的数据输入到数组中。给数组元素赋值的语法与给 int 变量赋值的语法很像。 例如,将 2016 赋给 int 变量的代码类似于下面这样: int thisYear; thisYear 2016;而将 2016 赋给第…

力扣初级算法(二分查找)

力扣初级算法(二分法): 每日一算法:二分法查找 学习内容: 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 2.二分查找流程&…

Mageia 9 RC1 正式发布,Mandriva Linux 发行版的社区分支

导读Mageia 9 首个 RC 已发布。公告写道,自 2023 年 5 月发布 beta 2 以来,Mageia 团队一直致力于解决许多顽固问题并提供安全修复和新特性。 新版本的控制中心添加了用于删除旧内核的新功能,该功能在 Mageia 9 中默认自动启用,用…

探秘手机隐藏的望远镜功能:开启后,观察任何你想看的地方

当今的智能手机不仅仅是通信工具,它们蕴藏着各种隐藏的功能,其中之一就是让你拥有望远镜般的观察能力。是的,你没有听错!今天我们将探秘手机中隐藏的望远镜功能,这项神奇的功能可以让你打开后,轻松观察任何…

Spring Boot读取yml或者properties配置信息

文章目录 Spring Boot读取yml或者properties配置信息方法一:Value获取基本信息,适用于少量信息方法二:通过注解ConfigurationProperties(prefix "spring.datasource")方法三:通过api Environment Spring Boot读取yml或…

小兔鲜项目 uniapp (1)

目录 项目架构 uni-app小兔鲜儿电商项目架构 小兔鲜儿电商课程安排 创建uni-app项目 1.通过HBuilderX创建 2.通过命令行创建 pages.json和tabBar案例 uni-app和原生小程序开发区别 用VS Code开发uni-app项目 拉取小兔鲜儿项目模板代码 基础架构–引入uni-ui组件库 操…

SSM个人博客项目

文章目录 SSM个人博客系统实现项目介绍 一、准备工作0. 创建项目添加对应依赖1. 数据库设计2. 定时实体类 二、功能实现1.统一功能处理统一返回格式统一异常处理定义登录拦截器 2. 注册登录实现生成获取验证码密码加盐实现注册功能登录功能注销功能 3.登录用户博客列表获取登录…

机器学习笔记之优化算法(十)梯度下降法铺垫:总体介绍

机器学习笔记之优化算法——梯度下降法铺垫:总体介绍 引言回顾:线搜索方法线搜索方法的方向 P k \mathcal P_k Pk​线搜索方法的步长 α k \alpha_k αk​ 梯度下降方法整体介绍 引言 从本节开始,将介绍梯度下降法 ( Gradient Descent,GD ) …

Git stash命令

Git stash Git stash用来暂存当前正在进行的工作, 将工作区还没加入索引库的内容压入本地的Git栈中,在需要应用的时候再弹出来。比如想pull 最新代码,又不想加新commit;或者为了修复一个紧急的bug,先stash&#xff0c…

Vue_02:详细语法以及代码示例 + 知识点练习 + 综合案例(第二期)

2023年8月4日15:25:01 Vue_02_note 在Vue中,非相应式数据,直接往实例上面挂载就可以了。 01_Vue 指令修饰符 什么是指令修饰符呢? 答: 通过 " . " 指明一些指令后缀,不同 后缀 封装了不同的处理操作 —…

基于差分进化优化随机森林的多分类预测,基于DA-RF的分类预测

目录 背影 摘要 随机森林的基本定义 随机森林实现的步骤 差分进化算法原理 差分算法主要参数 差分算法流程图 差分算法优化测试函数代码 完整代码包含数据下载链接: https://download.csdn.net/download/abc991835105/88179071 基于差分进化算法改进的bp神经网络的心理状况评估…

SpringCloud Gateway获取请求响应body大小

前提 本文获取请求、响应body大小方法的前提 : 网关只做转发逻辑,不修改请求、相应的body内容。 SpringCloud Gateway内部的机制类似下图,HttpServer(也就是NettyServer)接收外部的请求,在Gateway内部请求将会通过Htt…

RISC-V基础之函数调用(四)非叶函数调用(包含实例)

叶函数是指不调用其他函数,也不改变任何非易失性寄存器的函数2。叶函数通常是一些简单的操作,如数学运算或逻辑判断。叶函数的特点是可以通过模拟返回来展开,即不需要保存或恢复寄存器的状态。 非叶函数是指调用其他函数或改变非易失性寄存器…

电力巡检无人机助力迎峰度夏,保障夏季电力供应

夏季是电力需求量较高的时期,随着高温天气的来临,风扇、空调和冰箱等电器的使用量也大大增加,从而迎来夏季用电高峰期,电网用电负荷不断攀升。为了保障夏季电网供电稳定,供电公司会加强对电力设施设备的巡检&#xff0…

ATF(TF-A)安全通告汇总

目录计划如下,相关内容补充中,待完成后进行超链接,敬请期待,欢迎您的关注 1、Advisory TFV-1 (CVE-2016-10319) 2、Advisory TFV-2 (CVE-2017-7564) 3、Advisory TFV-3 (CVE-2017-7563) 4、Advisory TFV-4 (CVE-2017-9607) 5、Ad…

❤ vue3中的RouteRecordRaw

❤ vue3中的RouteRecordRaw RouteRecordRaw 是 Vue Router 4.x 中新增的类型&#xff0c;用于定义路由配置。它是一个 TypeScript 类型 import { RouteRecordRaw } from vue-routerconst routes: Array<RouteRecordRaw> [{path: /,name: Home,component: () > impo…

opencv基础-34 图像平滑处理-2D 卷积 cv2.filter2D()

2D卷积是一种图像处理和计算机视觉中常用的操作&#xff0c;用于在图像上应用滤波器或卷积核&#xff0c;从而对图像进行特征提取、平滑处理或边缘检测等操作。 在2D卷积中&#xff0c;图像和卷积核都是二维的矩阵或数组。卷积操作将卷积核在图像上滑动&#xff0c;对每个局部区…