小程序中手机点击input固定在底部获取焦点上推页面

最新推荐文章于 2025-03-05 09:53:52 发布

前端娱乐圈

最新推荐文章于 2025-03-05 09:53:52 发布

阅读量875

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签： input上推上推适配

本文链接：https://blog.youkuaiyun.com/weixin_43612234/article/details/102700876

微信小程序专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个小程序中输入框的位置调整技巧，通过设置属性并利用bindfocus和bindblur事件，实现输入框聚焦时上移，失去焦点时下移的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果input 中没有设置这个属性，你的内容将被上推上去。注意设置这个是false要加{{}}括起来，不然也不起作用。

在这里插入图片描述

<input class="commentinput" adjust-position='{{false}}'  bindinput='sendtext' value="{{textname}}" placeholder="跟主播聊点什么" cursor-spacing='20' bindfocus="bindfocus" bindblur="bindblur"></input>

在这里插入图片描述

这个还需要做一个适配，把输入框上移，焦点消失下移。

在这里插入图片描述

  bindfocus: function (e) {
    console.log(e)
    let that = this;
    let height = 0;
    let height_02 = 0;
    wx.getSystemInfo({
      success: function (res) {
        console.log(res)
        height_02 = res.windowHeight;
      }
    })
    console.log(e.detail.height);
    // height = e.detail.height - (app.globalData.height01 - height_02);
    height = app.globalData.height01;
    console.log('app is', app.globalData.height01);
    that.setData({
      height: height,
    })
    console.log(height);
    console.log(height_02);
  },

  bindblur: function (e) {
    this.setData({
      height: 20,
    });
  },