微信小程序使用scroll-view时，弹出的键盘会和底部input框重叠问题

最新推荐文章于 2024-01-16 15:54:22 发布
最新推荐文章于 2024-01-16 15:54:22 发布
阅读量822 收藏
点赞数
分类专栏： 微信小程序 文章标签： 小程序 scrollview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/superYe7/article/details/115762691
版权

    

 

<scroll-view style="height: calc(100vh - 340rpx);margin-bottom: 20rpx;background: #f8f8f8" scroll-y="true">
...
    <u-keyboard ref="uKeyboard" mode="number" v-model="show" :dot-enabled="false" @change="valChange" @backspace="backspace"></u-keyboard>
</scroll-view>

 解决方法：键盘弹出时scroll-y设为false

<scroll-view style="height: calc(100vh - 340rpx);margin-bottom: 20rpx;background: #f8f8f8" :scroll-y="!show">

 修改后：

 

superYe7
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 scroll-view滚动到底部事件不触犯的锅
03-29
今日准备把微信小程序的下拉刷新做一下，没想到我绑定了bindscrolltolower事件，但是居然不触发,我设置了lower-threshold高度无济于事.最后经过不懈的努力，找了很多资料，才发现,居然要设置scroll-view高度，于是我...
微信小程序-scroll-view横向滚动和上拉加载
03-29
今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方。先看最终效果。横向滚动1.设置滚动项display：i ...       最近刚好在集中scroll-view的文章和跳坑指南；  今天介绍微信小程序...
小程序 input键盘弹出时，滚动页面，输入框内容错位问题
lgh_ss的博客
05-28 3566
在ios9.+的版本上，遇到了一个问题。在键盘弹出的时候，快速滚动页面，输入的内容或input提示语会错位。且有时无法恢复到原有位置。当然，前提是你这个页面是超过一屏需要滚动的时候 解决办法： 1 页面可通过样式的滚动（overflow-y: auto）来写，但是不要用 -webkit-overflow-scrolling: touch; 2页面用scroll-view,通过变量{sysScroll}来控制 view: <scroll-view scroll-y="{{sysScroll}}"
自定义键盘支付：u-keyboard、u-message-input
sunluyi的博客
03-18 1838
<!-- 余额支付输入密码 --> <u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false" v-model="paypasswordShow" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange" @bac
解决微信小程序中两个view重叠的穿透问题
热门推荐
世事无常,无常是常
06-14 2万+
.bodyLock{ top:0px; left: 0px; width: 100%; height: 100%; overflow: hidden; position: fixed; z-index: 0;}使用方法:{{picStatus == true?'bodyLock':''}}
记录微信小程序项目遇到的几个问题
weixin_44600235的博客
07-20 731
因为没有具体公司位子的时候,白色部分就只有一点,是超出隐藏了，不是下拉不了,是显示不全，高度的问题，因为在最外层标签加上了“问题三”的overflow-xhidden;overflow-yhidden;也是把uniapp中的cover-image标签改为image标签就好了。所以这里受影响了，应该在最外层加个自适应的高度样式。......
微信小程序组件 - 中间底部弹出输入弹框
iotjin的专栏
08-28 4823
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类 一、 jh-input-alert 中间输入弹框，可设置最大输入长度，单行多行显示 单行 <jh-input-alert title='输入框标题' placeholder='请输入' maxlength='10' bind:cancel='cancel' bind:confirm='confirm' wx:if='{{ showDialog2 }}' /> 多行 <jh-i.
小程序常见问题以及解决方案总结
ShIcily的博客
05-07 3543
一、原生组件的层级是最高的，所以页面中的其他组件无论设置z-index为多少，都无法盖在原生组件上。 原生组件 小程序中的部分组件是由客户端创建的原生组件，这些组件有： camera canvas input（仅在focus时表现为原生组件） live-player live-pusher map textarea video 解决方案：使用小程序的cover-view和c...
解决微信小程序scroll-view换行问题
01-03
今天在写小程序的时候使用了scroll-view,但是发现在scroll-view中一行文字不能换行，代码如下： <scroll xss=removed> asdhadjhkajshdkjahsdkjasdajsdhkajsdkajsdkajsdhasjdaksj </scroll> 发现scroll-view内的一大...
微信小程序-scroll-view滚动到指定位置（类似锚点）
03-29
本文作者：莫兰迪不会没有瓶子，来自原文地址 先来说一下官网例子吧 ...scroll-view竖向滚动必须设置scroll-y="true" style="height: 200rpx;" 必须.. style="height: 200rpx;" 必须为200rpx/200px 不能用百分号 js中
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
10-17
总结来说，这个实例展示了如何结合微信小程序的 `scroll-view` 组件、动态计算和数据绑定，实现自动滚动到底部的功能。开发者可以根据实际需求调整代码，例如添加动画效果，或者在滚动到底部时触发加载更多数据的...
u-keyboard加自定义输入框，uniapp车牌号键盘
最新发布
Zyb429833894的博客
01-16 664
记录uniapp小程序车辆管理内，车辆输入和键盘的绑定
uniapp中的uview组件库丰富的Keyboard 键盘 用法
精通前端技术，了解后端接口
12-29 2591
打开键盘，按键的顺序都是随机的，该功能默认是关闭的。注意：点击退格键(也即删除键)不会触发。参数定义键盘的类型，
IOS键盘的相关设置(UITextfield)
weixin_34204722的博客
01-29 76
为什么80%的码农都做不了架构师？>>> ...
uniapp使用uview实现弹出键盘输入密码/验证码功能
林啾啾的博客
12-26 7911
文章目录（一）效果图（二）使用组件说明（三）HTML代码及涉及到的属性解释keyboard属性：keyboard事件：MessageInput属性：MessageInput事件：（四）css样式（五）js代码实现数据：事件： （一）效果图 （二）使用组件说明 组件使用的是uview组件，Keyboard 键盘和MessageInput 验证码输入两个组件配合使用。 uview官方文档： Keyboard 键盘：https://v1.uviewui.com/components/keyboard.html
【Uni-App】uniapp使用uview实现弹出键盘输入密码/验证码功能
Write less，do more
12-12 4643
通过dot-enabled(默认为true)参数配置，设置是否显示键盘的点(“.”)按键，只在"mode = number"时生效，因为车牌号和身份证键盘，用不到"."这个按键。通过mode参数定义键盘的类型，v-model绑定一个值为布尔值的变量，我绑定的是showKeyboard变量，控制键盘的弹出与收起；输入值是通过组件的change事件实现的，组件内部每个按键被点击的时候，组件就会发出一个change事件，回调参数为点击的按键的值。通过confirmBtn参数配置是否显示工具条右边的"完成"按钮。
uview组件u-code-input加u-keyboard模仿微信拉起支付密码弹窗
nbap_的博客
06-19 859
这个是我自己写的封装支付密码模块自己用的组件简单易懂，其他使用的朋友可以借鉴一下。那就开始上代码吧 hahah~~~肥肠滴方便。
微信小程序中键盘弹起输入框自动跳到键盘上方处理
w15635748705的博客
08-12 3308
键盘未弹起时。
微信小程序在使用scroll-view后，input聚焦时，键盘弹出后无法看到内容
weixin_38103152的博客
11-03 1094
微信小程序在使用scroll-view后，键盘弹出后无法看到内容，测试后发现，真实的输入框随键盘上移了所以看不到键盘， 并且聚焦时如果input不使用adjust-position="{{false}}"，会跑到页面顶部， 解决方案：在js中使用onPageScroll来代替scroll-view监听页面滚动 onPageScroll：官网文档并没有更新，但是在更新内容中可以看到 https://developers.weixin.qq.com/miniprogram/dev/framewor.
微信小程序使用scroll-into-view标签实现自动滑动到底部功能的实例代码
05-02
微信小程序使用scroll-into-view标签实现自动滑动到底部的功能可以通过以下步骤实现： 1. 在wxml文件中创建一个scroll-view标签，并设置其高度和宽度： ```html <scroll-view class="scroll-view" scroll-y="true" scroll-into-view="{{scrollIntoView}}" style="height:{{screenHeight}}px"> <!-- 待显示的内容 --> </scroll-view> ``` 2. 在对应的js文件中，定义一个全局变量scrollIntoView，初始化设为页面最底端的一个id值： ```javascript var that = this; that.setData({ scrollIntoView: 'bottom' // 定义一个全局变量scrollIntoView }) ``` 3. 当需要自动滑动到底部时，在父元素的内容改变时，修改scrollIntoView的值，让scroll-view自动滑动至页面底部： ```javascript var that = this; that.setData({ scrollIntoView: 'bottom' // 改变scrollIntoView的值 }) ``` 4. 在wxml页面中设置id为bottom的跳转点，当scrollIntoView的值被改变时，scroll-view将自动滑动到bottom的位置。 ```html <scroll-view class="scroll-view" scroll-y="true" scroll-into-view="{{scrollIntoView}}" style="height:{{screenHeight}}px"> <!-- 待显示的内容 --> <view id="bottom"></view> <!-- 跳转点 --> </scroll-view> ``` 通过以上步骤，即可实现微信小程序使用scroll-into-view标签实现自动滑动到底部功能的实例代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值