uniapp 微信小程ios端键盘弹起后导致页面无法滚动

2023-11-03 07:30

本文主要是介绍uniapp 微信小程ios端键盘弹起后导致页面无法滚动,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

项目业务逻辑和出现的问题整理

  1. 新增页面 用户可以主动添加输入文本框 添加多了就会导致当前页面出现滚动条,这就导致ios端滚动页面的时候去点击输入框键盘抬起再关闭的时候去滚动页面发现页面滚动不了(偶尔出现),经过多次测试发现是键盘抬起的时候 主动向上滑动 100%出现这种问题

  2. 这次项目主要使用了uview库的2.0版本,使用到了u-picker组件 发现一个问题 当选中第一个选项点击确定的时候会默认给page添加上position:fixed 的问题 导致页面无法滚动,这是第二个出现无法滚动的问题,以前使用1.0版本没有发现


一、第一个问题ios键盘弹起后关闭导致页面无法滚动

  1. 解决思路
  • 1.监听当前页面的滚动距离 实时拿一个变量去存储
  • 2 当键盘弹起关闭后 使用blur事件重新去渲染当前页面
  1. 代码
//监听 使用	scroll-view 组件 scroll事件  为什么不使用自带的onPageScroll方法 缺点可以自行体会<scroll-view class="scroll-view" scroll-y="true" @scroll="getScroll">所有内容包裹在这里</scroll-view >//存储当前滚动距离data() {return {scrollTop: 0}},
//监听方法getScroll(e){this.scrollTop = e.detail.scrollTop},
//关键地方  输入框失去焦点触发一次handleBlur() {uni.pageScrollTo({scrollTop: this.scrollTop})},

二、第二个问题

  • 不能有 scoped
<style>page {/* 		overflow-y: auto; */height: 100%;position: none !important;overflow-y: scroll; //可有可无top:0 !important}
</style>

总结

小小的宣传一下 个人做的去水印小程序 两天打鱼三天晒网完成的一个小项目 里面有很多做的不是很严谨,但功能还是能正常使用,目前完成了抖音和小红书的视频和图片去水印.,后续会研究下皮皮虾欢迎大家使用,
,在这里插入图片描述
现在已经做好博客功能,目前还没有上线 后面会在小程序里面发布一些有关于地下城勇士的脚本开发的一些思路和代码分享.这个脚本从21年开始i开发到23年 目前只有自己在使用 用了三年了 从当初的坑道到现在的风暴 使用虚拟机进行隔离,自动分解根据名望在自动选地图和等级,自己每周打打团做好行为还是嘎嘎爽的

这篇关于uniapp 微信小程ios端键盘弹起后导致页面无法滚动的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/336567

相关文章

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

电脑win32spl.dll文件丢失咋办? win32spl.dll丢失无法连接打印机修复技巧

《电脑win32spl.dll文件丢失咋办?win32spl.dll丢失无法连接打印机修复技巧》电脑突然提示win32spl.dll文件丢失,打印机死活连不上,今天就来给大家详细讲解一下这个问题的解... 不知道大家在使用电脑的时候是否遇到过关于win32spl.dll文件丢失的问题,win32spl.dl

pip无法安装osgeo失败的问题解决

《pip无法安装osgeo失败的问题解决》本文主要介绍了pip无法安装osgeo失败的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 进入官方提供的扩展包下载网站寻找版本适配的whl文件注意:要选择cp(python版本)和你py

SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

《SpringBoot项目启动报错找不到或无法加载主类的解决方法》在使用IntelliJIDEA开发基于SpringBoot框架的Java程序时,可能会出现找不到或无法加载主类com.example.... 目录一、问题描述二、排查过程三、解决方案一、问题描述在使用 IntelliJ IDEA 开发基于

如何用java对接微信小程序下单后的发货接口

《如何用java对接微信小程序下单后的发货接口》:本文主要介绍在微信小程序后台实现发货通知的步骤,包括获取Access_token、使用RestTemplate调用发货接口、处理AccessTok... 目录配置参数 调用代码获取Access_token调用发货的接口类注意点总结配置参数 首先需要获取Ac

Flask解决指定端口无法生效问题

《Flask解决指定端口无法生效问题》文章讲述了在使用PyCharm开发Flask应用时,启动地址与手动指定的IP端口不一致的问题,通过修改PyCharm的运行配置,将Flask项目的运行模式从Fla... 目录android问题重现解决方案问题重现手动指定的IP端口是app.run(host='0.0.

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D

SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法

《SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法》本文主要介绍了SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法,具有一定的参考价值,感兴趣的可以了解一下... 目录方法1:更改IDE配置方法2:在Eclipse中清理项目方法3:使用Maven命令行在开发Sprin

Flutter监听当前页面可见与隐藏状态的代码详解

《Flutter监听当前页面可见与隐藏状态的代码详解》文章介绍了如何在Flutter中使用路由观察者来监听应用进入前台或后台状态以及页面的显示和隐藏,并通过代码示例讲解的非常详细,需要的朋友可以参考下... flutter 可以监听 app 进入前台还是后台状态,也可以监听当http://www.cppcn

MySQL表锁、页面锁和行锁的作用及其优缺点对比分析

《MySQL表锁、页面锁和行锁的作用及其优缺点对比分析》MySQL中的表锁、页面锁和行锁各有特点,适用于不同的场景,表锁锁定整个表,适用于批量操作和MyISAM存储引擎,页面锁锁定数据页,适用于旧版本... 目录1. 表锁(Table Lock)2. 页面锁(Page Lock)3. 行锁(Row Lock