直播原始碼開發，實現 scroll-view 自動滾動到底部，並控制觸發頻率

直播原始碼開發，實現 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 自動滾動到底部，並控制觸發頻率，更多內容歡迎關注之後的文章