微信小程序实现聊天页面的样式--新增标签法

目标：实现像微信那样的聊天页面，键盘拉起，聊天信息也会顶起，不会被键盘遮住；发送聊天信息，消息也会自动往上走，不会被键盘遮住。

尝试一：使用微信小程序的input中的adjust-position=“{{true}}”,键盘顶起时，自动上推页面。

存在问题：当聊天页面对话消息太少时，会出现键盘顶起，页面自动上推过度，导致前面的聊天信息被顶没了。

尝试二：使用微信小程序获取元素信息的api——wx.createSelectorQuery()，来获取父对话框元素的高度，并加上软键盘的高度，达到键盘不遮盖内容的目的，并且使用scroll-view的scroll-into-view来实现最新消息的定位。

存在问题：在高度样式的赋值时，发现一定给父对话框的标签添加行内样式，就会出现获取的高度出现不准的问题；后来想说要不使用sass或者less这样就可以定义变量，应该可以解决直接写行内样式出现的问题。

---------------------------------------------------------------------------------------------------------------------------------

最终尝试新增标签法

 在父对话框里增加一个子元素view，这个子元素的作用就是根据键盘的顶起和收起来进行高度的变化，从而实现目标。

效果图：