小程序：轻松定位未读消息

2022-12-12 02:21:22

小程序聊天消息定位：快速轻松找到未读消息

前言

在微信小程序中开发聊天功能时，如何快速定位到首个未读消息一直是个难题。本文将介绍一种简单易用的方法，帮助开发者轻松实现此功能，提升小程序聊天体验。

滚动容器：无限滚动聊天窗口

第一步，我们将聊天消息放入一个滚动容器中。滚动容器类似于一个无限滚动的聊天窗口，用户可上下滚动查看更多内容。在小程序中，我们可以使用scroll-view组件创建滚动容器。

<scroll-view class="message-list">
  <!-- 聊天消息内容 -->
</scroll-view>

获取已读消息：标记阅读状态

接下来，我们需要获取聊天消息中已读消息的ID。我们可以给聊天消息列表添加一个“已读”标志，当用户阅读一条消息时，我们将该消息的“已读”标志设置为true。

<view class="message-item" data-id="{{ message.id }}" data-read="{{ message.read }}">
  <!-- 消息内容 -->
</view>

设置滚动条滚动高度：直达未读消息

最后，我们需要根据已读的消息ID，设置滚动条的滚动高度。这可以通过scrollTop属性实现，其值单位为像素。

this.setData({
  scrollTop: this.getScrollTop()
});

getScrollTop()方法可计算滚动条滚动高度。它首先找到聊天消息列表中首个未读消息的ID，然后计算出滚动条的滚动高度。

getScrollTop() {
  const unreadMessage = this.data.messages.find(message => !message.read);
  if (unreadMessage) {
    return unreadMessage.id;
  } else {
    return 0;
  }
}

代码示例

// 页面小程序.js
Page({
  data: {
    messages: [
      { id: 1, read: true, content: '消息1' },
      { id: 2, read: false, content: '消息2' },
      { id: 3, read: true, content: '消息3' },
    ],
    scrollTop: 0,
  },

  onLoad() {
    this.setData({
      scrollTop: this.getScrollTop(),
    });
  },

  getScrollTop() {
    const unreadMessage = this.data.messages.find(message => !message.read);
    if (unreadMessage) {
      return unreadMessage.id;
    } else {
      return 0;
    }
  },
});