直播源码开发,实现 scroll-view 自动滚动到底部,并控制触发频率
HTML
scroll-view 固定高度,允许纵向滚动,scrollTop 值通过变量动态改变。将 scroll-view 内容区域通过 view 标签进行包裹。
<scroll-view class="dialogue-box" :scroll-y="true" :scroll-top="scrollTop">
<view class="dialogue-box-content">
// 内容区域
</view>
</scroll-view>
js
通过类名获取 scroll-view、和 scroll-view内容容器,得到两个元素的高度,动态设置 scrollTop 值。
在频繁触发场景下,为了降低执行频率,可以增加节流函数 throttle,
import { throttle } from '@/utils/utils.js'
export default {
methods: {
// 自动滚动到底部
chatScrollTop: throttle(function() {
this.$nextTick(() => {
const query = uni.createSelectorQuery()
query.select('.dialogue-box').boundingClientRect()
query.select('.dialogue-box-content').boundingClientRect()
query.exec(res => {
const scrollViewHeight = res[0].height
const scrollContentHeight = res[1].height
if (scrollContentHeight > scrollViewHeight) {
const scrollTop = scrollContentHeight - scrollViewHeight
this.scrollTop = scrollTop
}
})
})
}, 1000),
}
}
当 scroll-view 内容改变时,调用 chatScrollTop 方法,就可以实现 scroll-view 内容区域自动滚动到底部效果。
以上就是 直播源码开发,实现 scroll-view 自动滚动到底部,并控制触发频率,更多内容欢迎关注之后的文章
标签:滚动,源码,query,scrollTop,scroll,view From: https://www.cnblogs.com/yunbaomengnan/p/17792193.html