小程序AI聊天页面：实现自动滚动到最新消息（二）

1. 项目背景

紧接上一篇文章中，聊天页面实现的功能点之后。

随着新的消息不断被接收，用户的视图中需要实时更新，以便快速查看新消息。尤其在长消息列表中，确保视图滚动到最新的消息是提供良好用户体验的重要环节。

2. 核心功能实现

为实现自动滚动到最新消息，我们需要完成以下步骤：

• 获取消息的总高度：当新消息被添加时，计算当前消息列表的总高度，以便设置 scrollTop 的位置。
• 使用 useEffect 钩子：在 allList 更新时，重新计算高度并更新 scrollTop。

3. 代码实现

以下是实现自动滚动的核心代码示例：

javascript
import Taro, { useEffect, useState } from '@tarojs/taro';  
import { View, ScrollView, Image, Text } from '@tarojs/components';  
import ChatItemComponent from './ChatItemComponent'; // 引入消息组件  
import aiBg from './path/to/your/image.png';  

const ChatContainer = ({ allList, loading, AI_TEXT }) => {  
  const [listScrollTop, setListScrollTop] = useState(0);  

  useEffect(() => {  
    const query = Taro.createSelectorQuery();  
    
    query.selectAll('.chat-item') // 选择所有的消息内容  
      .boundingClientRect((rects) => {  
        if (rects && rects.length) {  
          const totalHeight = rects.reduce((acc, rect) => acc + rect.height, 0); // 计算总高度  
          setListScrollTop(totalHeight + 34); // 设置 scrollTop，这里的 34 是我的消息框的内边距  
        }  
      }).exec();  
  }, [allList]); // 当 allList 改变时执行  

  return (  
    <ScrollView  
      className='chat-container'  
      id='chat-container'  
      scrollY  
      enableFlex  
      enableBackToTop  
      scrollTop={listScrollTop} // 设置当前滚动位置  
      scrollWithAnimation  
    >  
      {  
        allList.length === 0 ? (  
          <View className='ai-box'>  
            <Image src={aiBg} className='ai-bg'></Image>  
            <Text className='ai-text'>{AI_TEXT}</Text>  
          </View>  
        ) : (  
          allList.map((item, i) => (  
            <ChatItemComponent  
              key={i}  
              item={item}  
              loading={loading}  
              isLast={i === allList.length - 1}  
            />  
          ))  
        )  
      }  
    </ScrollView>  
  );  
};  

export default ChatContainer;  

4. 代码解析

• ScrollView: 通过 scrollTop={listScrollTop} 来控制视图的滚动位置。
• useEffect: 监听 allList 的变化，一旦接收到新的消息，就会执行高度计算。
• 计算高度: 使用 createSelectorQuery 方法选择所有的消息元素，并通过 boundingClientRect 获取其高度，从而计算出总高度。

5. 性能考虑

• 性能优化: 在实际开发中，如果消息数量非常庞大，计算总高度可能会影响性能。可以采用以下方式优化：
  • 限制渲染的消息数量，例如只渲染最近的100条消息。
  • 使用虚拟列表技术只渲染在视口内的消息。

6. 结论

通过上述实现，实现了小程序中自动滚动到最新消息的功能。这个技巧不仅提升了用户体验，还简化了消息展示的复杂性。希望本篇文章能对你的开发工作有所帮助！如果有进一步的问题或进行深入的讨论，欢迎随时交流。