uniapp中使用scroll-view组件实现评论消息动态控制滚动到最底部

对于聊天评论界面，有的时候需要使用scroll-view组件做固定区域的滚动效果，但是，当有新的评论内容显示的时候，如何能够做到动态让评论区滚动到最底部，以便于显示最新的评论，下面就简单介绍一下处理方式。

一、模板代码

#1.定义外层评论框scroll-view的ID（commentContainer）
#2.定义评论内层区域ID（commentContent）

<!-- 评论区域 -->
<view class="comment-wrap">
      <!-- 评论列表 -->
      <scroll-view
        id="commentContainer"
        style="height: 400rpx"
        :scroll-y="true"
        :scroll-with-animation="true"
        :scroll-top="commentScrollTop"
      >
        <view id="commentContent">
          <view
            class="comment-item-wrap"
            v-for="(item, index) in commentList"
            :key="index"
          >
            <view class="comment-item">
              <text
                class="item-username"
                v-if="
                  item.type == messageTypes.comment ||
                  item.type == messageTypes.like
                "
                >{{ item.create_name }}：</text
              >
              <text
                class="item-content"
                :class="{ gonggao: item.type == messageTypes.notice }"
                >{{ item.text }}</text
              >
            </view>
          </view>
        </view>
      </scroll-view>
      <!-- 评论列表 -->
</view>
<!-- 评论区域 -->

二、滚动值变量定义

data() {
    return {
        //评论区滚动高度
        commentScrollTop: 0,
       ...
    }
}

三、滚动到底部的方法

//滚动到底部
scrollToBottom() {
    let query = uni.createSelectorQuery().in(this)
    query.select('#commentContainer').boundingClientRect()
    query.select('#commentContent').boundingClientRect()
    query.exec((res) => {
    //如果子元素高度大于父元素高度(显示高度)
    if (res[1].height > res[0].height) {
      //计算出二者差值就是需要滚动的距离
       this.commentScrollTop = res[1].height - res[0].height
    }
  })
},

四、评论完调用滚动方法操作评论区滚动到最底部

#需要使用$nextTick延时调用，否则没有效果
this.$nextTick(() => {
    this.scrollToBottom()
})