评论

不用 fixed ,也能实现类似微信的聊天页面

简单好用的聊天页面实现方案分享

代码

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

效果

需求

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

实现方案

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

遇到的问题

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