uniapp ios端使用fixed定位导致输入时页面滚动简单解决方法

当移动端使用fixed定位自定义nav栏时,安卓端正常固定在可视窗顶部,但是ios端当有input输入,弹出软键盘时,会将nav顶出可视区,因为在ios上,不是相对于浏览器窗口定位的,而是相对于最近的可滚动区,所以就会导致软键盘弹出时,跟随内容一起滚出去了

解决一

//pages.json 配置style "style": {//手机软键盘升起不让其将页面头部上推"app-plus": {"softinputMode": "adjustResize"}},

当我们配置完后会发现,ios端解决了顶出的问题;很棒!但接着新问题又出现了,软键盘弹出时滚动页面,自定义nav栏又跟着跑了(¬︿̫̿¬☆),怎么办呢,我们可以监听页面滚动事件,当页面滚动时就收起软键盘,这样就不会跟着跑啦;

<input class="input"  v-model="oneTopic.value" :adjust-position="false" @input="onInputValue()" />
//监听页面滚动事件export default {data() {isInput: false},onPageScroll(res) {console.log("页面滚动了", res)if (!this.isInput) {uni.hideKeyboard() //隐藏软键盘}},methods: {onInputValue() {this.isInput = true}}}

你们一定会问,为啥多了个isInput的判断,因为实测发现,当input框被软键盘挡住时,输入会触发页面滚动事件,真是离谱;为了解决这个问题,我们可以监听页面input的输入事件,当输入时,赋值给isInput,这样就能判断是真实页面滚动,还是输入事件;这样一个不完美的解决方案就完成了;
(ps: 截取的关键代码,没测试,有问题大概就是这个解决思路)

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

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

相关文章

Vue常用指令介绍

Vue指令&#xff1a; 指令带有前缀 v- 开头&#xff0c;以表示它们是 Vue 提供的特殊属性。 v-text&#xff0c;v-html&#xff1a; html&#xff1a; <div id"ddd"><!-- {{插值表达插入变量&#xff0c;不会覆盖标签体中的内容}}v-text,v-html会覆盖掉标…

Linux :环境基础开发工具

目录: 1. Linux 软件包管理器 yum 1. 什么是软件包 2. 查看软件包 3. 如何安装软件 4. 如何卸载软件 2. Linux开发工具 1. Linux编辑器-vim的基本概念 2. vim使用 3. vim的基本操作 4. vim正常模式命令集 5. vim末行模式命令集 6. 简单vim配置 3. Linux编译器-gcc/…

博世全球首个高阶智能驾驶项目量产 ,由腾讯云提供专有云支持

近日&#xff0c;博世全球首个高阶智能驾驶项目——奇瑞星途星纪元项目成功量产。在奇瑞星途星纪元ES最新向用户推送的OTA内容中&#xff0c;NEP高速领航系统正式上线。该系统采用全新人机共驾策略&#xff0c;可实现高速端到端的自动驾驶。 该系统由博世智能驾驶与控制系统事…

常用相似度计算方法总总结

一、欧几里得相似度 1、欧几里得相似度 公式如下所示&#xff1a; 2、自定义代码实现 import numpy as np def EuclideanDistance(x, y):import numpy as npx np.array(x)y np.array(y)return np.sqrt(np.sum(np.square(x-y)))# 示例数据 # 用户1 的A B C D E商品数据 [3.3…

缓存知识回顾

- 缓存的使用场景 系统查询性能较低&#xff0c;且对数据实时性要求不高的 - 两种常见的缓存 本地缓存&#xff1a; java中的Map、List 的确这种方式简单有效&#xff0c;但是带来的弊端就是过于简单&#xff0c;功能也就过于缺乏&#xff0c;而且如果使用不当&#xff0c;将带…

知识管理软件那么多,怎么挑选才适合初创企业?

对于初创企业来说&#xff0c;资源有限&#xff0c;效率显得尤其重要。此时&#xff0c;一个强大的知识管理软件就显得必不可少。它不仅利于信息的录入、查找和共享&#xff0c;还可以帮助团队更好的组织和协作&#xff0c;提高工作效率。那么&#xff0c;在众多的知识管理软件…

SQL-Labs靶场“34-35”关通关教程

君衍. 一、34关 POST单引号宽字节注入1、源码分析2、联合查询注入3、updatexml报错注入4、floor报错注入 二、35关 GET数字型报错注入1、源码分析2、联合查询注入3、updatexml报错注入4、floor报错注入 SQL-Labs靶场通关教程&#xff1a; SQL注入第一课 SQL注入思路基础 SQL无列…

第 6 章 ROS-xacro练习(自学二刷笔记)

重要参考&#xff1a; 课程链接:https://www.bilibili.com/video/BV1Ci4y1L7ZZ 讲义链接:Introduction Autolabor-ROS机器人入门课程《ROS理论与实践》零基础教程 6.4.3 Xacro_完整使用流程示例 需求描述: 使用 Xacro 优化 URDF 版的小车底盘模型实现 结果演示: 1.编写 X…

24计算机考研调剂 | 江西理工大学

能源、化工、计算机&#xff08;0854&#xff09;等相关方向有3个调剂名额 考研调剂招生信息 学校:江西理工大学 专业:工学->治金工程 年级:2024 招生人数:3 招生状态:正在招生中 联系方式:********* (为保护个人隐私,联系方式仅限APP查看) 补充内容 能源、化工、计…

使用Dockerfile打包java项目生成镜像部署到Linux

1、Dockerfile 介绍 如果说容器就是“小板房”&#xff0c;镜像就是“样板间”。那么&#xff0c;要造出这个“样板间”&#xff0c;就必然要有一个“施工图纸”&#xff0c;由它来规定如何建造地基、铺设水电、开窗搭门等动作。这个“施工图纸”就是“Dockerfile”。 比起容…

VUE3.0(一):vue3.0简介

Vue 3 入门指南 什么是vue Vue (发音为 /vjuː/&#xff0c;类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和JavaScript 构建&#xff0c;并提供了一套声明式的、组件化的编程模型&#xff0c;帮助你高效地开发用户界面。无论是简单还是复杂的界…

0基础 三个月掌握C语言(13)-下

数据在内存中的存储 浮点数在内存中的存储 常见的浮点数&#xff1a;3.141592、1E10等 浮点数家族包括&#xff1a;float、double、long double类型 浮点数表示的范围&#xff1a;在float.h中定义 练习 关于&#xff08;float*)&n&#xff1a; &n&#xff1a;这是一…

2549.统计桌面上的不同数字:数学O(1) / 模拟O(n^3)

【LetMeFly】2549.统计桌面上的不同数字&#xff1a;数学O(1) / 模拟O(n^3) 力扣题目链接&#xff1a;https://leetcode.cn/problems/count-distinct-numbers-on-board/ 给你一个正整数 n &#xff0c;开始时&#xff0c;它放在桌面上。在 109 天内&#xff0c;每天都要执行下…

Java transient 关键字

Java字段不想序列化怎么办 在 Java 中&#xff0c;如果某个字段不想被序列化&#xff08;即不希望被写入到序列化的数据流中&#xff09;&#xff0c;可以使用 transient 关键字进行标记。通过在字段前加上 transient 关键字&#xff0c;可以告诉 Java 序列化机制忽略该字段&am…

53、Qt/信号与槽、QSS界面设计20240322

一、使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"admin"&#xff0c;密码是…

Stable Diffusion训练图片时,简陋的数据处理

0 图片从命名 如果有强迫症&#xff0c;看到似乎乱码的命名会不舒服&#xff0c;那么就批量从命名 import osdef rename_files_in_directory(directory, key_word, new_suffix):i 1for filename in os.listdir(directory):new_file key_word str(i).zfill(3) new_suffixsou…

yolov6实现遥感影像目标识别|以DIOR数据集为例

1 目标检测是计算机视觉领域中的一项重要任务&#xff0c;它的目标是在图像或视频中检测出物体的位置和类别。YOLO&#xff08;You Only Look Once&#xff09;是一系列经典的目标检测算法&#xff0c;最初由Joseph Redmon等人于2016年提出。YOLO算法具有快速、简单、端到端的特…

证书(公钥):网络安全的关键

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

YOLOv5全网首发改进: 注意力机制改进 | 上下文锚点注意力(CAA) | CVPR2024 PKINet 遥感图像目标检测

💡💡💡本文独家改进:引入了CAA模块来捕捉长距离的上下文信息,利用全局平均池化和1D条形卷积来增强中心区域的特征,从而提升检测精度,CAA和C3进行结合实现二次创新,改进思路来自CVPR2024 PKINet,2024年前沿最新改进,抢先使用 💡💡💡小目标数据集,涨点近两个…

【亚马逊云AI课程上新】「生成式 AI 精英速成计划」 即刻成为炙手可热 AI 人才

文章目录 1. 生成式 AI 精英速成计划介绍2. 重磅课程 增亮你的职业生涯3. 多种身份 全面赋能4. 关于「商业应用技能」课程5. 关于「技术开发技能」课程介绍6. 化身学霸得好礼 好礼双周送附&#xff1a;亚马逊云科技海外账号注册流程 1. 生成式 AI 精英速成计划介绍 &#x1f4…