解决微信小程序input textarea输入框内容以及palceholder随页面滚动式跟着滚动,飘起来了。

bug 类型效果:
在这里插入图片描述
输入框内的文字跑了。

解决办法:

测试了网上的监听滚动事件,手动调用wx.hideKeyboard等方式,都不好使。

大概原因: 在页面出现滚动时,输入框跑了。 如果不是滚动页面,不能滚动,就不会出现。

刚开始整个外层标签是<view></view>, 换成<scroll-view></scroll-view> 再加个样式min-height:100vh; 就完美解决了。

原因可能和小程序原生对scroll-view内的input等滚动做了更好的优化,滚动式input及时失去焦点。

查询文档,另外看到两种解决办法:记录一下

这三种方法,未亲测。

https://developers.weixin.qq.com/community/develop/article/doc/000a00e1fd0790488e6a034f156813

1 页面可通过样式的滚动(overflow-y: auto)来写,但是不要用 -webkit-overflow-scrolling: touch;

2、页面用scroll-view,通过变量{sysScroll}来控制

view: 
<scroll-view scroll-y="{{sysScroll}}"  scroll-top="{{scrollTop}}" class="scroll-hei-2 bg-def">
    <form >
      <input bindfocus="onfocus" bindblur="onblur" />
    </form>
</scroll-view>

js: 
  onfocus: function() {
    this.setData({sysScroll: false})
  },
  onblur: function (e, param, inst) {
    this.setData({sysScroll: true})
  }

3、试一下这个属性 always-embed = true

### 微信小程序 `textarea` 组件滚动实现方法及配置 #### 设置 `textarea` 的父容器样式 为了使 `textarea` 能够正常滚动,可以调整其父容器的 CSS 属性。如果整个页面需要大于手机视窗,则应确保 `textarea` 不受其他元素的影响而能够独立滚动。 ```css /* 父容器 */ .parent-container { overflow-y: scroll; } ``` 对于 `textarea` 自身及其直接父级元素,移除任何可能导致滚动行为异常的 `overflow:hidden` 或者类似的属性[^2]。 #### 使用 `fixed` 定位处理键盘弹出问题 当使用悬浮键盘时,可能会遇到键盘无法弹出的情况。为了避免这种情况发生,在设计布局时需预留足够的空间供键盘弹出: ```css .textarea-wrapper { position: fixed; bottom: env(safe-area-inset-bottom); /* 支持安全区域 */ width: 100%; box-sizing: border-box; padding: 0 15px; } ``` 此方案通过固定定位来防止输入框被软键盘遮挡,并利用环境变量 `env()` 来适配不同设备的安全边距[^3]。 #### 替代显示方式 另一种解决方案是采用替代性的显示逻辑:创建一个可点击的 `div` 元素作为占位符,用户点击该 `div` 后切换至实际的 `textarea` 进行编辑操作;完成编辑后再次切回原样式的静态展示形式。这种方式不仅解决滚动冲突的问题,还提升了用户体验。 ```html <!-- WXML --> <view class="editable-content"> <!-- 编辑模式下可见 --> <textarea v-if="isEditing" bindblur="handleBlur"></textarea> <!-- 查看模式下可见 --> <div v-else style="white-space: pre-wrap;" @click="toggleEdit">{{displayText}}</div> </view> <script type="text/javascript"> Page({ data: { isEditing: false, displayText: '' }, toggleEdit() { this.setData({ isEditing: true }); }, handleBlur(e) { const value = e.detail.value.trim(); this.setData({ displayText: value || '无内容', isEditing: false }); } }) </script> ``` 上述代码片段展示了如何动态控制两个元素之间的切换,同时保持文本格式的一致性[^4]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值