收藏
回答

关于输入框、键盘、页面不共存问题

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug textarea 客户端 6.6.7 2.0.9

连续提问了几次

小程序里面要实现聊天的功能,目前遇到的一个问题。

1、点击输入框后,页面往上移动了,无法看不到原有的文字。尤其是聊天内容不多的情况下。

2、设置adjust-position=false时,点击输入框,键盘向上移动,覆盖了输入框。

如何解决这个问题?谢谢


<!--index.wxml-->

<view class="container">

  <view class="mainer">

    <view>文本2</view>

  </view>

  <view class="footer">

    <input class="input" adjust-position="{{false}}"/>

  </view>

</view>


/**index.wxss**/

.container{

height:100%;

}


.mainer{}


.footer{

position:fixed;

bottom:0;

}


.input{

border:solid 1px red;

}


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

1 个回答

  • Jarvis
    Jarvis
    2018-06-04

    去掉adjust-position="{{false}}"


    /**index.wxss**/

    .footer{

    position:fixed;

    bottom:0;

    left:0;

    width:750rpx;

    border:solid 1px #333;

    }

    .input{

    width:690rpx;

    padding: 20rpx 30rpx;

    height: 50rpx;

    }


    2018-06-04
    有用 1
    回复 7
    • 赵丹丹13566036926
      赵丹丹13566036926
      2018-06-04

      去掉了,出现的问题就是:获得焦点后,页面的文字往上移动。

      2018-06-04
      回复
    • Jarvis
      Jarvis
      2018-06-04回复赵丹丹13566036926

      本来就是要向上移的吧,可以看一下微信,键盘弹出和没弹出,文字的位置肯定不一样的,弹出键盘窗口会发生变化,这时候的页面底部相当于键盘的上边框

      2018-06-04
      回复
    • 赵丹丹13566036926
      赵丹丹13566036926
      2018-06-04回复Jarvis

      我说的向上移动指的是,完全看不到文字了。而不是微信里面的小移动

      2018-06-04
      回复
    • Jarvis
      Jarvis
      2018-06-04回复赵丹丹13566036926

      弹出键盘,键盘占用了屏幕的空间,肯定要向上移动的,最顶上的文字会被挤出屏幕看不懂,很正常啊。这不算BUG吧。。除非弹个键盘出来屏幕自动拉长,那怎么可能

      2018-06-04
      回复
    • 好一阵子
      好一阵子
      2018-06-15回复Jarvis

      您好,你可以观察下微信的聊天,如果内容比较少,页面是不会上推的,如果页面比较多,页面就会上推。

      现在我也遇到同样的问题,页面总是上推,如果就一条聊天内容,就看不见了

      2018-06-15
      2
      回复
    查看更多(2)
登录 后发表内容