直播源码开发，实现 scroll-view 自动滚动到底部，并控制触发频率

直播源码开发，实现 scroll-view 自动滚动到底部，并控制触发频率

HTML

 

scroll-view 固定高度，允许纵向滚动，scrollTop 值通过变量动态改变。将 scroll-view 内容区域通过 view 标签进行包裹。

 

1	<br><scroll-view class="dialogue-box" :scroll-y="true" :scroll-top="scrollTop"><br>  <view class="dialogue-box-content"><br>    // 内容区域<br>  </view><br></scroll-view>

​

js

 

通过类名获取 scroll-view、和 scroll-view内容容器，得到两个元素的高度，动态设置 scrollTop 值。

 

在频繁触发场景下，为了降低执行频率，可以增加节流函数 throttle，

 

1

<br>import { throttle } from '@/utils/utils.js'<br>export default {<br>  methods: {<br>    // 自动滚动到底部<br>    chatScrollTop: throttle(function() {<br>      this.$nextTick(() => {<br>        const query = uni.createSelectorQuery()<br>        query.select('.dialogue-box').boundingClientRect()<br>        query.select('.dialogue-box-content').boundingClientRect()<br>        query.exec(res => {<br>          const scrollViewHeight = res[0].height<br>          const scrollContentHeight = res[1].height<br>          if (scrollContentHeight > scrollViewHeight) {<br>            const scrollTop = scrollContentHeight - scrollViewHeight<br>            this.scrollTop = scrollTop<br>          }<br>        })<br>      })<br>    }, 1000),<br>  }<br>}

 

当 scroll-view 内容改变时，调用 chatScrollTop 方法，就可以实现 scroll-view 内容区域自动滚动到底部效果。

 以上就是 直播源码开发，实现 scroll-view 自动滚动到底部，并控制触发频率，更多内容欢迎关注之后的文章