美文网首页
uniapp中使用scroll-view组件实现评论消息动态控制

uniapp中使用scroll-view组件实现评论消息动态控制

作者: 周星星的学习笔记 | 来源:发表于2022-04-15 20:04 被阅读0次

    对于聊天评论界面,有的时候需要使用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()
    })
    

    相关文章

      网友评论

          本文标题:uniapp中使用scroll-view组件实现评论消息动态控制

          本文链接:https://www.haomeiwen.com/subject/tshfertx.html