微信小程序之解决键盘与页面scroll-view问题_小程序scroll-view输入框弹起

场景介绍：

在编写小程序类似微信聊天页面时，常常遇到这样情况：

a/ 键盘弹出或收起时，聊天消息没有自动滚到最底部。

b/ 点击输入框弹出软键盘后，遮盖部分聊天内容。

解决方式：

一，解决问题a

将聊天页面的所有msg都编号如：msg-0，msg-1，msg-2… 直接锁定最后一条msg，滚动到那里即可。

步骤：

1，在scroll-view标签中添加：scroll-into-view='{{toView}}'，
2，在wx:for后面添加：wx:for-index="index"，
3，在每个msg布局中添加：id='msg-{{index}}'，
4，在js文件中：

this.setData({
	toView: 'msg-' + (msgList.length - 1)
})

二，解决问题b

步骤：

1，将input的自动向上推给关掉,注意有坑：在input组件中添加：adjust-position='{{false}}'，而不是：adjust-position='false'。此时页面不再向上推，但软键盘弹起时，会遮挡部分的聊天消息。

2，当软键盘弹起时，将scroll-view的高度缩短至软键盘遮挡不到的屏幕上方部分，当软键盘收起时，再将scroll-view的高度还原即可。

input中的bindfocus='focus'可获取软键盘高度并监听软键盘弹起，bindblur='blur'可监听软键盘收起，var windowHeight = wx.getSystemInfoSync().windowHeight;可获得屏幕高度。

scrollHeight（滚动条高度） = windowHeight（屏幕高度） - 软键盘高度 - input输入框高度;

 

代码示例：

index.wxml

<scroll-view style='height: {{scrollHeight}}; margin-top:{{marheight}}px' scroll-y="true"  scroll-into-view='{{toView}}' >
	<!-- 循环渲染历史记录 messages -->
	<view class='dialog' wx:for="{{messages}}" wx:for-index="index" id='msg-{{index}}'>
		<view style="height: 30px;margin: auto;font-size: 24rpx;color: #aaa;text-align:center">{{item.time}}</view>
		<!-- 居左 -->
		<view wx:if="{{item.duixiangtype==2}}">
			<!-- 头像 -->
			<image src="../../img/2.png" style='float:left'></image>
			<!-- 文本消息，可能随带有表情，得用富文本编辑器rich-text -->
			<view>
				<rich-text nodes="{{nodes[index]}}" class='ctext'  selectable='true'></rich-text>
			</view> 
		</view>
		<!-- 居右 -->
		<view wx:else>
			<!-- 微信头像 -->
			<view  class='frImg' style="width: 40px;height: 40px;clip-path: circle(40rpx at center);">
				<open-data type="userAvatarUrl" ></open-data>
			</view>
			<!-- 文本消息，可能随带有表情，得用富文本编辑器rich-text -->
			<view>
				<rich-text nodes="{{nodes[index]}}" class='ctext frText' selectable='true'></rich-text>
			</view>
		</view>
	</view>
</scroll-view>

index.js

//获取应用实例
const app = getApp();
var keyHeight = 0;	//键盘的高度
var inputHeight = 60;	//输入框的高度
var windowWidth = wx.getSystemInfoSync().windowWidth;
var windowHeight = wx.getSystemInfoSync().windowHeight;
Page({
	data: {
		messages:[],	//历史纪录
		marheight: 0,	//键盘弹起时，输入框距离底部高度
		scrollHeight: '100vh',	//可滑动区域高度
		inputBottom: 0,	//输入框距离底部的高度
	}
 
	/*
	* 生命周期函数--监听页面加载
	*/
	onLoad: function(options) {
		var that = this;
		var nodes_data = [];
		wx.request({
			url: ,
			method: "POST",
			data: {},
			header: {
				'content-type': 'application/x-www-form-urlencoded'
			},
			success: function (res) {
				var data = res.data;
				//判断是否存在历史记录
				if(!data){
					return;
				}
				that.messages = [];
				that.setData({
					messages: that.messages.concat(data)
				})
				//追加添加欢迎提示语
				var date = new Date();
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
				that.time = h + m;//获取当前时间
				var huan = {
					time:that.time,
					duixiangtype:2,
					speech:'您好,欢迎咨询',
				};
				that.data.messages.push(huan);
				that.setData({
					messages: that.data.messages,
				})
				//定位到最新消息
				that.setData({
					scrollHeight: (windowHeight - inputHeight) + 'px',
					inputBottom: 0+ 'px'
				})
				that.scroll();
				//判断是否有表情，转化为线上资源
				for (var i = 0; i < that.data.messages.length;i++) {
					if (that.data.messages[i].msg.indexOf("[face_") !==-1) {
						that.nodes = that.data.messages[i].msg.replace(/\[face_([0-9]*)\]/g, '<img style="width: 20px;height: 20px;margin:0 2px;margin-top:5px;" src="https://你的线上域名/$1.png"/>');
						nodes_data.push(that.nodes);
					}else {
						nodes_data.push(that.data.messages[i].msg);
					}
				}
				that.setData({
					nodes:nodes_data
				})
			},
			fail: function (res) {
				
			}
		})
	},
	
	// 发送消息定位最新消息
	scroll:function(e) {
		this.setData({
			toView: 'msg-' + (this.data.messages.length - 1)
		})
	},
	
	//获取聚焦(软键盘弹出)
	focus: function(e) {
		keyHeight = e.detail.height;
		this.setData({
			scrollHeight: (windowHeight - keyHeight - inputHeight) + 'px'
		});
		this.setData({
			toView: 'msg-' + (this.data.messages.length - 1),
			inputBottom: keyHeight + 'px'
		})
	},
	  
	//失去聚焦(软键盘消失)
	blur: function(e) {
		this.setData({
			scrollHeight: (windowHeight - inputHeight) + 'px',
			inputBottom: 0+ 'px',
		})
		this.setData({
			toView: 'msg-' + (this.data.messages.length - 1)
		})
	},
})