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