taro中实现聊天滚动底部,键盘顶起输入框

2020年11月6日13:53:54 3 阅读(4,426)
本文最后更新于2020年12月9日,已超过一年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

taro中实现聊天滚动底部,键盘顶起输入框

在taro开发微信小程序的时候,对接了一个直播平台的sdk,其中里面是有一个聊天模块,在直播过程中,可以实时获取房间内不同用户的聊天信息。

需求一

当我们回调实时接收到这个消息的时候,就将页面滚动至底部,保持看到的是最新的消息。

思路:聊天列表是一个数组,收到新的消息数组长度增加,页面dom高度改变,滚动到对应高度。

代码

  1. //聊天滚动底部方法
  2. scrollBottom() {
  3.     var that = this
  4.     var query = Taro.createSelectorQuery().select('#chat-list').boundingClientRect()
  5.     query.exec(function (res) {
  6.         that.setState({
  7.             scrollTopValue: res[0].height
  8.         })
  9.     });
  10. }
tip

#chat-list为id为chat-list的元素。

scrollTopValue为页面需要滚动的高度,赋值给ScrollView组件即可。

需求二

发送消息的时候,聚焦输入框,键盘顶起,页面内容保持原样,输入框在键盘上方。

效果图:

taro中实现聊天滚动底部,键盘顶起输入框

思路:聚焦输入框,键盘弹起,获取键盘高度,将输入框使用position: fixed;固定定位为键盘的高度。

代码

  1. <View className="footerButton" style="{`bottom:" ${bottom}`}>
  2.     <AtInput
  3.             adjustPosition={false//键盘弹起时,是否自动上推页面 
  4.             onBlur={this.isOnBlur.bind(this)} //失去焦点触发
  5.             onKeyboardHeightChange={this.isFourceHeight.bind(this)} //键盘高度发生变化的时候触发此事件 
  6.     />
  7. </View>
  8. //失焦 
  9. isOnBlur() {
  10.     this.setState({ bottom: 0, })
  11.     }
  12. //获取键盘高度 
  13. isFourceHeight(e) {
  14.     this.setState({ bottom: e.detail.height + 'px',
  15.     })
  16.  }

 

完。

 

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛

目前评论:3   其中:访客  2   博主  1

    • 唐北乐 唐北乐 0

      但是这个事件只支持小程序嘞,h5好像不行

        • 舍得 舍得

          @唐北乐 当时的开发场景是微信小程序,h5的没有试,应该需要一些兼容处理 [委屈]

        • 楚狂人 楚狂人 1

          感谢博主分享