先看效果

?

代碼：

index.js

const app = getApp() Page({data:{statsuBarHeight: app.globalData.statsuBarHeight,headHeight:40,chatListHeight:0,keyboardHeight:0,messageList:[],inutPanelHeight:50,toView: "item0",curMessage:"",},onLoad(){this.setChatListHeight();wx.onKeyboardHeightChange(res => { //監聽鍵盤高度變化this.setData({keyboardHeight: res.height});this.setChatListHeight();this.scroll2Bottom();});},setChatListHeight() {this.setData({chatListHeight: app.globalData.sysHeight - app.globalData.statsuBarHeight - this.data.headHeight - this.data.keyboardHeight- this.data.inutPanelHeight})},hideKeyboard(){wx.hideKeyboard();this.hideMediaPanel();},getInput(e){let value = e.detail.value;this.setData({curMessage: value});},send() {let curMessage = this.data.curMessage;if (curMessage.trim() === "") {wx.showToast({title: '請輸入聊天內容',duration: 2000,icon: "none"})return;}let messageList = this.data.messageList;messageList.push(curMessage);this.setData({curMessage:"",messageList:messageList})}, })

index.json

{"navigationStyle":"custom" }

index.wxml

<view class="header" style="top:{{statsuBarHeight}}px">聊天 </view> <scroll-view class="message-list" style="top:{{statsuBarHeight+headHeight}}px;height:{{chatListHeight}}px"scroll-y="true" scroll-into-view="{{ toView }}" bindtap="hideKeyboard"><block wx:for="{{messageList}}" wx:key="index" wx:for-item="item"><view>{{item}}</view></block> </scroll-view> <view class="input-panel" style="bottom:{{keyboardHeight}}px"><input adjust-position="{{false}}" hold-keyboard="{{true}}" bindinput="getInput" value="{{curMessage}}"/><view class="send-btn" bindtap="send">發送</view> </view>

index.wxss

.header{position: fixed;width: 100%;border-bottom: 1px solid #dddd;text-align: center;height: 40px;line-height: 40px; }.message-list{position: fixed;width:100%; } .input-panel {display: flex;background: #dddddd;height: 50px;position: fixed;width:100%;padding:0px 10px;align-items: center;box-sizing: border-box; }.input-panel input {flex: 1;width: 100%;background: #ffffff;height: 30px;line-height: 30px;box-sizing: border-box;padding:0px 5px;border-radius: 3px; }.send-btn {display: inline-block;padding: 0px 10px;color: #fff;background: green;border-radius: 3px;line-height:30px;margin-left:5px; }

?

app.js

// app.js App({globalData: {statsuBarHeight:0,sysWidth:0,sysHeight:0,},onLaunch() {const res = wx.getSystemInfoSync()var statusbarH = res.statusBarHeightthis.globalData.statsuBarHeight=statusbarH;this.globalData.sysWidth = res.screenWidth;this.globalData.sysHeight = res.screenHeight;}, })

主要思路就是，彈出鍵盤后，不把內容頂起來，我們監聽鍵盤高度變化，自動設置輸入框和內容的高度，已達到比較好的體驗

完整版預覽：

可以掃碼體驗：

?

?

?

?

總結

以上是生活随笔為你收集整理的微信小程序，输入时键盘弹起，聊天输入框自动弹起，内容不顶起的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。