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();
}相关文章:
uniapp获取屏幕宽度时 获取不到移动设备中内容盒子宽度
首先 :我使用的是uniapp vue3语法: 问题: 我出现这个问题是IOS 设备发现的,data.boxWidth为0 代码: const initCreated () > {const query uni.createSelectorQuery().in(instance.proxy);const el query.select…...
篇十二:代理模式:控制对象访问
篇十二:“代理模式:控制对象访问” 开始本篇文章之前先推荐一个好用的学习工具,AIRIght,借助于AI助手工具,学习事半功倍。欢迎访问:http://airight.fun/。 另外有2本不错的关于设计模式的资料,…...
P1657 选书
1:思路:一看数据,嗯....!,爆搜嘛?,看一眼题目,嗯!!!,爆搜! 配上俺的无敌小剪枝,按下拿下! 2:暴力枚举每个人获…...
代码随想录第46天 | 139. 单词拆分、多重背包
139. 单词拆分 确定dp数组以及下标的含义 dp[i] : 字符串长度为i的话,dp[i]为true,表示可以拆分为一个或多个在字典中出现的单词。 确定递推公式 如果确定dp[j] 是true,且 [j, i] 这个区间的子串出现在字典里,那么dp[i]一定是tru…...
Unreal View Model结合GAS使用
这个东西真的难用,各种问题,记录下 官方文档 bilibili教学 开启插件 插件开启 Viewmodel: build.cs内PublicDependencyModuleNames加上ModelViewViewModel 创建ViewModel类 #pragma once#include "CoreMinimal.h" #include &quo…...
Spring-Cloud-Loadblancer详细分析_2
LoadBalancerClients 终于分析到了此注解的作用,它是实现不同服务之间的配置隔离的关键 Configuration(proxyBeanMethods false) Retention(RetentionPolicy.RUNTIME) Target({ ElementType.TYPE }) Documented Import(LoadBalancerClientConfigurationRegistrar…...
uniapp 左右滑动切换页面并切换tab
实现效果如图 要实现底部内部的左右滑动切换带动上方tab栏的切换,并且下方内容要实现纵向滚动 ,所以需要swiper,swiper-item,scroll-view组合使用 tab栏部分 <view class"tabs"><view class"tab_item" v-for&…...
FinClip 支持小程序维度域名配置;桌面端体验活动进行中
FinClip 的使命是使您(业务专家和开发人员)能够通过小程序解决关键业务流程挑战,并完成数字化转型的相关操作。不妨让我们看看在本月的产品与市场发布亮点,看看是否有助于您实现目标。 产品方面的相关动向👇…...
已有公司将ChatGPT集成到客服中心以增强用户体验
Ozonetel正在利用ChatGPT来改善客户体验。该公司表示,他们通过使用ChatGPT收集与客户互动过程收集的“语料”能够更有针对性地提高服务效率,提供个性化的用户体验,并实现更高的客户满意度。[1] 通过这套解决方案,客服中心将拥有一…...
108. 将有序数组转换为二叉搜索树
文章目录 题目描述思路解答(c)结果 题目描述 给你一个整数数组 nums ,其中元素已经按 升序 排列,请你将其转换为一棵 高度平衡 二叉搜索树。 高度平衡 二叉树是一棵满足「每个节点的左右两个子树的高度差的绝对值不超过 1 」的二…...
视频分辨率: UXGA/SVGA/VGA/QVGA/QQVGA
视频分辨率除了常见的720p/2K/4K外, 还有VGA系列的分辨率 相关字段含义: V——Video (视频) G——Graphics(图像) A——Array(阵列) S——Super(超级) X——Extended(扩展) U——Ultra(终极) W——Wide&am…...
Leecode力扣27数组移除元素
题目链接:力扣 最终可运行的代码1:暴力法 class Solution { public:int removeElement(vector<int>& nums, int val) {int index0;int numnums.size();while(index<nums.size()-1){if(nums[index]val){int jindex;num--;while(j<nums.…...
百度云盘发展历程与影响
摘要: 百度云盘作为中国领先的云存储与共享服务提供商,自其创立至今经历了多个阶段的发展与变革。本论文通过对百度云盘的历史回顾与分析,探讨了其在技术、商业模式、用户体验以及对社会的影响等方面的演变。同时,还分析了在竞争激…...
SpringBoot复习:(33)WebMvcAutoconfiguration内部静态类WebMvcAutoConfigurationAdapter
WebMvcAutoconfiguration内部静态类WebMvcAutoConfigurationAdapter实现了WebMvcConfigurer接口,重写了一些方法,也就是默认对Spring Mvc进行了一些配置: 该静态类上有个**Import**注解: Import(EnableWebMvcConfiguration.class) 它的父类…...
f1tenth仿真2
起点(0.192,0.201) 终点(9.902,5.148) 起点(9.902,5.148) 终点(-13.289,7.058) 起点(-13.289,7.058) 终点(-13.289,0.201) 起点(-13.289,0.201) #! /usr/bin/env python import time from numba import jit import math import rospy import numpy as…...
exec族函数
本节学习exec族函数,并大量参考了以下链接: linux进程---exec族函数(execl, execlp, execle, execv, execvp, execvpe)_云英的博客-CSDN博客 exec族函数函数的作用 我们用fork函数创建新进程后,经常会在新进程中调用exec函数去执行另外一个程…...
dbm与mw转换
功率值10^(dBm值/10),单位mW。 对于-5dBm,其功率值为0.3162 mW。 dBm 10 * lg(mW)...
【Linux】多线程之单例模式
多线程之单例模式 什么是设计模式,都有哪些设计模式单例模式饿汉模式懒汉模式 什么是设计模式,都有哪些设计模式 设计模式就是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理…...
Vision Transformer模型入门
Vision Transformer模型入门 一、Vision Transformer 模型1,Embedding 层结构详解2,Transformer Encoder 详解3,MLP Head 详解 二、ViT-B/16 网络结构三、Hybrid 模型详解四、ViT 模型搭建参数 一、Vision Transformer 模型 总体三个模块&am…...
如何使用 Go 获取 URL 的参数,以及使用时的问题
Go 获取 URL 参数也很容易,但是由于 Go 有严格的数据类型和错误管理,所以在使用时会些微有些复杂。所以本文不仅会讲如何获取 URL 的参数,也会讲在使用时的一些问题。 首先假设 URL 是https://www.example.com/?keywordabc&id12。 其他…...
阴阳师自动脚本爬塔功能异常诊断与修复指南
阴阳师自动脚本爬塔功能异常诊断与修复指南 【免费下载链接】OnmyojiAutoScript Onmyoji Auto Script | 阴阳师脚本 项目地址: https://gitcode.com/gh_mirrors/on/OnmyojiAutoScript 阴阳师自动脚本(OAS)的爬塔功能是玩家自动化游戏体验的核心模…...
3大核心功能解锁:OpenUtau如何重新定义虚拟歌手创作体验
3大核心功能解锁:OpenUtau如何重新定义虚拟歌手创作体验 【免费下载链接】OpenUtau Open singing synthesis platform / Open source UTAU successor 项目地址: https://gitcode.com/gh_mirrors/op/OpenUtau 想象一下,你坐在电脑前,脑…...
解决PyTorch那个恼人的CUDA断言错误:一个真实数据清洗案例复盘
解决PyTorch那个恼人的CUDA断言错误:一个真实数据清洗案例复盘 那是一个周五的深夜,办公室里只剩下我和咖啡机还在运转。我正在为下周要交付的图像分类模型做最后的训练,突然屏幕上跳出了那个让所有PyTorch开发者都心头一紧的错误:…...
如何3分钟安装B站评论智能标注工具:开源社区互动助手完整指南
如何3分钟安装B站评论智能标注工具:开源社区互动助手完整指南 【免费下载链接】bilibili-comment-checker B站评论区自动标注成分,支持动态和关注识别以及手动输入 UID 识别 项目地址: https://gitcode.com/gh_mirrors/bil/bilibili-comment-checker …...
**发散创新:过度依赖单一编程语言导致的架构风险与重构实践**在现代软件开发中,**选择一种编程语言并深度
发散创新:过度依赖单一编程语言导致的架构风险与重构实践 在现代软件开发中,选择一种编程语言并深度绑定其生态已成为许多团队的默认策略。然而,这种“技术栈锁定”现象正悄然埋下隐患——一旦该语言在特定场景下表现乏力、维护成本飙升或社区…...
深入VS编译后台:从cl.exe到link.exe,一次C++代码的完整‘旅程’都发生了什么?
深入VS编译后台:从cl.exe到link.exe,一次C代码的完整‘旅程’都发生了什么? 当你在Visual Studio中点击"生成"按钮时,背后其实隐藏着一系列精密的工序。这就像把一块原石雕琢成精美的艺术品,需要经过多道工序…...
Onmyoji Auto Script 爬塔功能异常排查与优化指南
Onmyoji Auto Script 爬塔功能异常排查与优化指南 【免费下载链接】OnmyojiAutoScript Onmyoji Auto Script | 阴阳师脚本 项目地址: https://gitcode.com/gh_mirrors/on/OnmyojiAutoScript 阴阳师自动脚本(Onmyoji Auto Script,简称OASÿ…...
3步解密B站抢票神器:为什么别人总比你快0.1秒?
3步解密B站抢票神器:为什么别人总比你快0.1秒? 【免费下载链接】biliTickerBuy b站会员购购票辅助工具 项目地址: https://gitcode.com/GitHub_Trending/bi/biliTickerBuy 你是否曾经在B站会员购抢票时,眼睁睁看着心仪的演唱会门票在几…...
Legacy iOS Kit终极指南:如何让旧iPhone重获新生并提升性能
Legacy iOS Kit终极指南:如何让旧iPhone重获新生并提升性能 【免费下载链接】Legacy-iOS-Kit An all-in-one tool to restore/downgrade, save SHSH blobs, jailbreak legacy iOS devices, and more 项目地址: https://gitcode.com/gh_mirrors/le/Legacy-iOS-Kit …...
AI抠图新选择:cv_unet图像抠图WebUI对比传统工具,实测效果大揭秘
AI抠图新选择:cv_unet图像抠图WebUI对比传统工具,实测效果大揭秘 1. 为什么需要更好的抠图工具 在日常工作和生活中,我们经常需要处理图片抠图的需求。无论是电商产品图、证件照换背景,还是社交媒体头像制作,一个简单…...
