xz/wx-chant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
wx-chant/测试说明.md
邹方成 0af7fc4ec5 feat(聊天页面): 添加新消息提醒功能并优化自动滚动逻辑 
实现智能滚动行为，当用户不在底部时显示新消息提醒气泡
添加动画效果和样式，点击气泡可滚动到最新消息
优化滚动检测逻辑，保持轮询始终运行
2025-10-31 00:40:32 +08:00

2.2 KiB
Raw Blame History

自动滚动修复测试说明

修复内容

已修复聊天页面自动刷新后自动滚动到底部的问题，现在实现智能滚动：

修复的问题

  • ✅ 轮询刷新时不再强制滚动到底部
  • ✅ 用户在底部时，新消息会自动滚动显示
  • ✅ 用户在上方浏览历史消息时，保持当前位置
  • ✅ 添加了延迟处理确保滚动生效

修改的文件

  • pages/contact/index.js - 修改了 getMessages() 函数的滚动逻辑

测试步骤

1. 打开项目

  1. 使用微信开发者工具打开项目目录：/Users/win/code2025/wx-chant
  2. 确保项目配置正确，appid 已设置

2. 测试场景

场景1：用户在底部时的自动滚动

  1. 进入聊天页面
  2. 滚动到最底部
  3. 等待新消息到达（轮询刷新）
  4. 预期结果：新消息自动滚动到视图中

场景2：用户在上方时保持位置

  1. 进入聊天页面
  2. 向上滚动查看历史消息
  3. 等待新消息到达（轮询刷新）
  4. 预期结果：
    • 滚动位置保持不变
    • 显示新消息提醒气泡
    • 点击气泡可滚动到最新消息

场景3：用户发送消息时的自动滚动

  1. 在聊天页面发送文本或图片消息
  2. 预期结果：自动滚动到刚发送的消息

3. 调试信息

已添加控制台日志，可在微信开发者工具的控制台中查看：

  • 滚动状态变化
  • 自动滚动触发情况
  • scrollToId 设置情况

4. 关键日志信息

  • 用户在底部，准备自动滚动到消息ID: xxx - 触发自动滚动
  • 用户不在底部或无消息，保持当前位置 - 保持位置
  • 用户向上滚动，设置isAtBottom为false - 状态变化
  • 用户滚动到底部，当前isAtBottom状态: xxx - 到达底部

技术实现

核心逻辑

// 智能滚动：先更新数据，再延迟设置滚动
that.setData(updateData);

if (that.data.isAtBottom && sortedList.length > 0) {
  setTimeout(() => {
    that.setData({
      scrollToId: lastMessageId
    });
  }, 50);
}

状态管理

  • isAtBottom: 标记用户是否在聊天底部
  • scrollToId: 控制滚动到指定消息
  • 延迟50ms确保DOM更新后再滚动