代码

代码片段 先贴出来，有兴趣的可以直接看代码

效果

需求

• 类似微信的聊天页面
• 内容部分可以滚动定位，并有滚动动画效果
• 底部可以输入文字，其中输入框最高支持显示5行内容

实现方案

• 先禁用 page 容器的滚动，以避免在 ios 上父容器也出现弹性滚动，会影响到底部操作栏的一些手势操作
• 使用 flex 布局，以便底部操作栏的高度可以动态化，其中内容部分使用 flex: 1，占满剩余部分
• 基于原生的系统 api 和节点 api ，动态计算出内容部分的 scroll-view 的高度

遇到的问题

• 在 ios 端，textarea 的焦点位置会飘忽不定，经过查询资料，去掉 line-height 后就正常了
• 在使用 fixed 来实现底部操作栏时，对于其位置要动态计算，需要监听键盘高度的变化事件，js 逻辑更复杂
• 在 ios 端，由于存在 iphone X 等全面屏机型，再实现底部操作栏时，要考虑兼容起全面屏底部手势，采用计算安全区域的方式，就可以了
• 使用 scroll-view 组件实现的下滑触顶加载更多，在渲染下页数据时，会直接滚动到顶部，即便使用 scroll-into-view 固定跳转到上一页数据的最后一项，也会出现闪烁现象，暂时没有找到比较好的解决方案