526互联

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

发布时间 2023-10-27 14:19:30作者: 云豹科技-苏凌霄

直播源码开发，实现 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 自动滚动到底部，并控制触发频率，更多内容欢迎关注之后的文章