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

2020年11月6日13:53:54 3 阅读(5,308)

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
      回复 2023年6月5日 上午10:08   板凳

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

        • 舍得 舍得
          回复 2023年7月6日 上午11:47

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

        • 楚狂人 楚狂人 1
          回复 2020年11月11日 下午6:52   沙发

          感谢博主分享