公告列表
公告列表
收藏
回答

input控件如何游离于布局之外，出现在最新评论下方，始终紧贴软键盘上方？

类似微信朋友圈评论的输入框，始终是在朋友圈最新评论下方，贴紧软键盘的上方。完全游离于页面布局，不影响页面。有什么实现思路。

回答关注问题邀请回答
收藏

4 个回答

  • 莫道不消魂
    莫道不消魂
    2020-06-15

    这个问题你有解决吗？

    2020-06-15
    有用
    回复
  • 团团呗
    团团呗
    2020-06-02

    可以实现的，实现思路是用scroll-view包住整个页面，点击dom时获取dom的到屏幕底部的距离，然后dom Bottom减去键盘高度和输入框高度保存成变量num，然后获取scroll-view当前的滚动距离减去num，就能获取到正确的移动位置设置给scroll-view就能实现dom对齐键盘输入框，效果你可以来看，miss试用装小程序，在晒小样详情，点击评论他人就能看到这个效果

    2020-06-02
    有用
    回复 16
    • 吴杰
      吴杰
      2020-06-02
      看了下你说的这个小程序，输入框没有显示在最新评论下方，你看下微信朋友圈评论功能，输入框位置，用户体验好
      2020-06-02
      赞
      回复
    • $
      $
      2020-06-02
      试过了 效果还不错   input实现的话 要好写很多 我用的是 textarea 你的右下角按钮可以控制 type为 send就是发送了 也可以写一个事件 还有一个问题 你这个发送按钮没有值的时候 不要一点就缩下去了 可以hold住 disabled 也可以
      2020-06-02
      赞
      回复
    • 团团呗
      团团呗
      2020-06-02回复吴杰
      我设置的是点击哪条评论就对齐哪条评论，不同机型可能有偏移，在iPhone6-8机型是没问题的
      2020-06-02
      赞
      回复
    • 团团呗
      团团呗
      2020-06-02回复$
      这个问题是当时做的时候考虑到用户在评论的时候滑动页面就自动关闭评论框，所以就为了省事失去焦点就直接关闭评论框了
      2020-06-02
      赞
      回复
    • 吴杰
      吴杰
      2020-06-02回复团团呗
      击评论按钮，应该对齐最后一条。不过你这个已经实现了，没什么问题。我按你的思路试试。我是前端新手，现在用的布局方式都是view，里面flex➕padding布局，没用到定位属性，怕布局很乱，控制不住
      2020-06-02
      赞
      回复
    查看更多(11)
  • Admin ²º²⁴
    Admin ²º²⁴
    2020-06-02

    监听键盘弹出事件，获取键盘高度，根据页面高度和键盘高度算出页面可视区域高度，然后根据需要控制好页面相关组件的top值

    这个说简单，实现起来挺费脑的。因为不同手机不同输入法兼容性还不一样

    2020-06-02
    有用
    回复 4
    • 吴杰
      吴杰
      2020-06-02
      我现在页面布局是view嵌套布局，高度都是根据内容决定的，比如评论区高度是看评论条数。我不知道我的想法是不是有问题，我想的是，这个input，不应该是在页面布局里面的，他的出现不能打乱页面布局。试过absolute，但是定位到最新评论下方，做不到
      2020-06-02
      赞
      回复
    • 飞翔的仓鼠
      飞翔的仓鼠
      2020-09-02回复吴杰
      使用fixed定位
      2020-09-02
      赞
      回复
    • qiubc
      qiubc
      2020-12-01
      依照楼主的想法，已实现：
      1、input组件，position:fixed; bottom: px, 初始不显示
      2、单击评论按钮或已有评论，显示input，并focus
      3、监听input失去焦点，失去焦点时，不显示且收起键盘
      input的样式可以做成和朋友圈的一样
      2020-12-01
      赞
      回复
    • qiubc
      qiubc
      2020-12-01回复qiubc
      position:fixed; bottom: 0px
      2020-12-01
      赞
      回复
  • $
    $
    2020-06-02

    坐等大神 这种效果除了原生app的输入键盘 估计没其他的好办法

    2020-06-02
    有用
    回复 1
    • 吴杰
      吴杰
      2020-06-02
      这种问题很常见吧，应该有通用方案吧
      2020-06-02
      赞
      回复
请 登录 后发表内容
相关问题
相关文档
问题标签
小程序开发组件布局表单组件键盘input