微信小程序输入框顶起页面相关笔记

2023-5-29日解决问题：

关于小程序聊天页，输入框键盘将页面整个顶起的解决方案：

目标：输入框只顶起聊天内容，不顶起顶部页头部分

解决方案：设置键盘不顶起页面。设置当键盘出现时，聊天框bottom增加值等于键盘高度，聊天内容margin-bottom增加值也等于键盘高度。

代码部分：

wxml：为input框增加属性 adjust-position = "{{false}}" (用于取消键盘自动顶起整个页面) ，bindfocus="onFocus" (监听键盘激活事件)，bindblur="onBlur"(监听键盘收起事件)；若input外层还有关于输入框的组件，那么在最外层组件中添加style="bottom: {{inputBottom}}px;"属性 用于确保输入框在键盘上方

//聊天列表
<view class="ui-container main-container" style="margin-bottom: {{inputBottom - 55}}px;">
    聊天内容部分
</view>
//输入框内容
<view id='chat-box' class="bg-olive-gradient {{chatBoxFix ? 'chat-box-fix' : 'chat-box'}} {{chatBoxFixNew ? 'chat-box-fix-new' : ''}}" style="bottom: {{inputBottom}}px;">
        <view class="chat-input-wrapper shadow-blur"  >
                <ui-input-box class="chat-input" ui="ui-BG mr-2 ui-item round" isType="text" clear>
                        <input class="ui-input-wrapper pl-4" placeholder="请输入文本" model:value="{{inputMsg}}" adjust-position="{{false}}" bindfocus="onFocus" bindblur="onBlur" bindinput="userInput"/>
                </ui-input-box>
                <button class="ui-btn bg-blue-gradient sm shadow-blue round" bindtap="sendMsg" disabled="{{waitAnswer}}">发送</button>
        </view>
</view>

js：在data里增加属性：isFocus: false, (用于绑定键盘状态) inputBottom : ' ', (用于动态调整输入框以及消息列表的bottom高度)

Page({
    data: {
        isFocus: false,
        inputBottom : '',
    },
//监听键盘弹起事件
onFocus: function(e) {
        this.setData({
            inputBottom : e.detail.height,
            isFocus: true,
        })
        wx.pageScrollTo({ scrollTop: 99999 })
  },
//监听键盘收起事件
onBlur: function() {
    this.setData({
        isFocus: false,
        inputBottom : 55,
      });
  },
})

css部分就不展示了，与主要功能无关，无非是关于输入框样式与页面布局有关的