小程序scroll-view滚动到底

2022-08-26 290 阅读1分钟

我的项目是用在聊天窗口，每次发送消息和接收消息，聊天界面滚动到底。

html

注意 scroll-view需要设定高度height
增加enhanced="true"属性（启用 scroll-view 增强特性，启用后可通过 ScrollViewContext 操作 scroll-view）
增加id
在scroll-view里的最后，放一个有id的view（我这里是<view class="" id="chat_panel_last_view_id"></view>）

<scroll-view
  :scroll-y="true"
  :scroll-with-animation="true"
  :enhanced="true"
  id="chat_panel_div_class_find_id"
  :style="{ display: 'block', height: morePanelController.chatHeight.value }"
>
  <view class="scroll_view_content">
    ...
    <view class="" id="chat_panel_last_view_id"></view>
  </view>
</scroll-view>

js

Taro.createSelectorQuery()
  .select('#chat_panel_div_class_find_id')
  .node()
  .exec((res) => {
    const scrollView = res[0].node
    scrollView.scrollIntoView('#chat_panel_last_view_id')
  })