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

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

先上效果图：

以下为实现代码：

布局：

</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"此处根据界面高度、界面布局内容高度、滑动情况等综合情况去动态设置输入框布局的位置；

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

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

解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题
一.存在的问题: 微信小程序聊天界面,当input 框获取焦点时会自动调起手机键盘,当键盘弹起时,会导致页面整体上移,页面头信息会消失不见. 二.需要实现的效果键盘弹出时, 底部的 ...
Taro小程序，底部输入框获取键盘高度动态设置bottom有延迟解决
Taro小程序,底部输入框获取键盘高度动态设置bottom有延迟0.5s左右业务场景: Taro+TaroUI+微信小程序底部固定了一个输入框,当聚焦时输入框自然要上推页面才合理.但不能设置adj ...
native固定吸顶 react_React Native固定底部TextInput，解决键盘遮挡、列表滚动问题
效果图 timer.gif 做类似于微信聊天输入框,可能会遇到下面三个小困扰,记录一下. 目录 # 1.React Native固定底部TextInput # 2.键盘遮挡问题 # 3.列表滚动问题 ...
c语言弹出文本框,微信小程序弹出文本输入框
你应该用点击详情.了解更多! 详情史蒂芬孙 2018-12-19 00:54 0评论 0赞同在微信平台下开发小程序,接口输出的数据应该一致,如果是ios不一致,也应该由基础库去实现详情 Sac ...
微信小程序基础之input输入框控件
今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...
解决小程序自定义底部菜单切换闪动
解决小程序自定义底部菜单切换闪动业务上可能会有一个需求使用自定义底部菜单相信会有很多人遇到过这个需求但是自定义底部菜单会有一个问题,在点击切换页面的时候底部菜单会重新加载,导致页面闪动,比较影响用 ...
微信小程序iPhoneX 底部虚拟Home键区域适配方案
微信小程序iPhoneX 底部虚拟Home键区域适配方案为什么要适配? 先看下iPhoneX和之前的iPhone的区别,如下图可以看出主要是顶部和底部多了一些区域,如果页面内容进入该区域,有可能会 ...
在微信小程序中做自己的数字键盘
在微信小程序中做自己的数字键盘为什么要自制键盘? 使用系统键盘带来的不便理想的自制键盘效果怎样自制键盘? 键盘的效果为什么要自制键盘? 我最近在开发一款微信小程序,现在需要用户输入一个数字. ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...

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

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

最新文章

热门文章