小程序固定底部悬浮输入框，跟随键盘移动解决方案

悠悠 2021-11-23 03:34 1420阅读 0赞

为了实现小程序底部固定悬浮的评论输入框，实现过程中，键盘弹起有很多交互问题，解决过程记录一下。

先上效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmxpdF82_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmxpdF82_size_16_color_FFFFFF_t_70 1][]

以下为实现代码：

布局：

</view>

css：

.commentsInputLayout \{

width: 100%;

height: 100rpx;

position: fixed;

bottom: 0rpx;

left: 0rpx;

right: 0rpx;

z-index: 20;

display: -webkit-flex;

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;

background-color: \#fff;

/\* 使之可以滚动 \*//\* overflow-y: scroll; \*//\* 增加该属性，可以增加弹性，是滑动更加顺畅 \*/

\-webkit-overflow-scrolling: touch;

/\*\* border-top必须设置，如不设置在部分机型上会出现定位不准问题\*/

.commentsInput \{

width: auto;

height: 100rpx;

line-height: 100rpx;

position: relative;

flex: 1;

padding-left: 30rpx;

padding-right: 30rpx;

font-size: 32rpx;

word-break: break-all;

word-wrap: break-word;

color: \#333;

border-top: solid \#f4f4f4 0.01rpx;

background-color: \#f4f4f4;

z-index: 21;

/\*\* border-top必须设置，如不设置在部分机型上会出现定位不准问题\*/

.commentsBtn \{

height: 100rpx;

line-height: 100rpx;

position: relative;

font-size: 32rpx;

color: \#fff;

border-top: solid \#2b3e61 0.01rpx;

padding-left: 30rpx;

padding-right: 30rpx;

background-color: \#2b3e61;

z-index: 21;

js中的实现（关键）：

/\*\*

\* 页面的初始数据

\*/

data: \{

windowHeight: 0,//记录界面高度

containerHeight: 0,//记录未固定整体滚动界面的高度

containerBottomHeight: 0,//记录未固定整体滚动界面距离底部高度

keyboardHeight: 0,//键盘高度

isIphone: false//是否为苹果手机，因苹果手机效果与Android有冲突，所以需要特殊处理

/\*\*

\* 生命周期函数--监听页面加载

\*/

onLoad: function(options) \{

var that = this

//获取屏幕高度以及设备信息（是否为苹果手机）

wx.getSystemInfo(\{

success: function(res) \{

that.data.windowHeight = res.windowHeight

that.data.isIphone = res.model.indexOf("iphone") >= 0 || res.model.indexOf("iPhone") >= 0

// console.error(res)

\});

/\*\*

\* 生命周期函数--监听页面初次渲染完成

\*/

onReady: function() \{

var that = this

setTimeout(() => \{

//界面初始化渲染需要初始化获取整体界面的高度以及距离信息

that.refreshContainerHeight()

\}, 800);

/\*\*

\* 刷新整体界面高度、距离等信息，如列表有上划加载数据，需要在数据加载过后调用此方法进行高度以及间距的刷新

\*/

refreshContainerHeight: function() \{

var that = this

var query = wx.createSelectorQuery();

query.select('.container').boundingClientRect()

query.exec((res) => \{

//container为整体界面的class的样式名称

that.data.containerHeight = res\[0\].height;

that.data.containerBottomHeight = res\[0\].bottom

\})

/\*\*

\* 界面滚动监听

\*/

onPageScroll: function(e) \{

var that = this

// 界面滚动刷新整体界面高度以及间距

that.refreshContainerHeight()

/\*\*

\* 评论框焦点获取监听

\*/

inputCommentsFocus: function(e) \{

var that = this

if (!that.data.isIphone) \{

var keyboardHeight = e.detail.height

var windowHeight = that.data.windowHeight

var containerHeight = that.data.containerHeight

var containerBottomHeight = that.data.containerBottomHeight

//整体内容高度大于屏幕高度，才动态计算输入框移动的位置；

if (containerHeight > windowHeight) \{

if ((containerBottomHeight - windowHeight) > keyboardHeight) \{

//距离底部高度与屏幕高度的差值大于键盘高度，则评论布局上移键盘高度；

that.setData(\{

keyboardHeight: e.detail.height

\})

\} else \{

//距离底部高度与屏幕高度的差值小于键盘高度，则评论布局上移距离底部高度与屏幕高度的差值；

var newHeight = containerBottomHeight - windowHeight

that.setData(\{

keyboardHeight: newHeight

\})

\} else \{

that.setData(\{

keyboardHeight: 0

\})

\} else \{

that.setData(\{

keyboardHeight: 0

\})

\},

/\*\*

\* 评论框焦点失去监听

\*/

inputCommentsBlur: function(e) \{

var that = this

that.setData(\{

keyboardHeight: 0

\})

注意1：需要整体界面内容放在scroll-view中，如不加会影响滑动效果；

<scroll-view scroll-y="\{ \{true\}\}">

//此处放界面显示的内容

</scroll-view>

</view>

//固定悬浮底部的输入框，如输入框覆盖部分内容，适当给内容View设置manger-bottom解决；

</view>

注意2：关键点在于这个地方，style="bottom:\{ \{keyboardHeight\}\}px"此处根据界面高度、界面布局内容高度、滑动情况等综合情况去动态设置输入框布局的位置；

还存在的问题：华为手机上，键盘弹起速度比较慢并且键盘布局下是透明的，所以界面被顶起以后会有一瞬间看到前一个界面的内容，此问题还需解决研究优化解决。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmxpdF82_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190725190125421.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmxpdF82,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmxpdF82_size_16_color_FFFFFF_t_70 1]: /images/20211122/c071112478114520893e4459b84b726c.png