解决微信小程序picker被输入键盘遮盖情况


问题

在微信小程序中,当点击input后,立刻点击picker,则会触发这个bug。

触发条件: 切换动作要很快。IOS比较容易触发,安卓触发的概率较小。

出现bug原因(猜测): IOS的键盘动画较慢,在键盘升起的时候,立刻触发picker,就会导致键盘没有收回。

相关bug链接:https://developers.weixin.qq.com/community/develop/doc/000e6e0b6389a07a0d5aac43e51c00?highLine=picker%2520%25E9%2594%25AE%25E7%259B%2598%2520%25E9%2581%25AE%25E7%259B%2596

解决方案

<!-- index.wxml -->
<input type="text" placeholder="示例: 邓明豪博客(http://47.112.140.159)"></input>

<picker bind:tap="handleClick" class="picker" mode="date">时间选择器</picker>
const app = getApp()

Page({
  data: {

  },
  // 防止picker被键盘遮盖
  handleClick() {
    // 设置两次,保证百分百触发
    setTimeout(() => {
      wx.hideKeyboard()
    }, 500)
    setTimeout(() => {
      wx.hideKeyboard()
    }, 1000)
  }
})

源码演示

https://developers.weixin.qq.com/s/vk02j6m37slS

评论
还没有评论
    发表评论 说点什么