uniapp 自动上下滚动内容实现方法 - 使用 uni-scroll 组件

<template>
  <view class='scroll-box'>
    <uni-scroll :scroll-top='scrollTop' :scroll-with-animation='true'>
      <view class='content'>
        <!-- 内容区域 -->
      </view>
    </uni-scroll>
  </view>
</template>
<script>
export default {
  data() {
    return {
      scrollTop: 0 // 初始化时scrollTop为0
    }
  },
  mounted() {
    setInterval(() => {
      // 每隔一定时间执行一次
      const query = uni.createSelectorQuery().in(this)
      query.select('.content').boundingClientRect((res) => {
        if (res.height > 0) {
          const maxScrollTop = res.height - uni.getSystemInfoSync().windowHeight
          if (this.scrollTop < maxScrollTop) {
            // 滚动到底部时不再滚动
            this.scrollTop += 50 // 每次滚动的距离
          } else {
            this.scrollTop = 0 // 滚动到顶部重新开始滚动
          }
        }
      }).exec()
    }, 2000) // 每隔2秒执行一次
  }
}
</script>
<p>通过上述代码，即可实现uniapp自动一条一条上下滚动的效果。需要注意的是，每次滚动的距离可以根据实际情况进行调整，以达到最佳效果。</p>