uniapp 列表自动滚动

### 实现 UniApp 列表自动滚动

为了实现在 UniApp 中列表的自动滚动效果，可以采用定时器配合 `scroll-view` 组件来达到目的。下面是一个详细的实现方案。

#### HTML 结构
创建一个包含可滚动视图及其子项的内容结构：

<template>
  <view class="container">
    <!-- 可滚动容器 -->
    <scroll-view scroll-y="true" :style="{ height: containerHeight + 'px' }" :scroll-top="scrollTop" @scroll="handleScroll">
      <block v-for="(item, index) in items" :key="index">
        <view class="list-item">{{ item }}</view>
      </block>
    </scroll-view>
  </view>
</template>

#### JavaScript 控制逻辑
通过 Vue 的生命周期钩子设置定时任务，在特定条件下更新 `scrollTop` 属性以触发滚动行为[^1]。

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', ...], // 列表示例数据
      scrollTop: 0,
      intervalId: null,
      containerHeight: 300, // 容器高度设定
      itemHeight: 50       // 单个条目高度估算值
    };
  },
  mounted() {
    this.startAutoScroll();
  },
  methods: {
    handleScroll(event) {},
    startAutoScroll() {
      let currentIndex = 0;
      const totalItems = this.items.length;

      function autoScrollStep() {
        if (currentIndex >= totalItems - Math.floor(this.containerHeight / this.itemHeight)) {
          currentIndex = 0; // 当到达底部时重置索引位置
        }
        this.scrollTop = currentIndex * this.itemHeight;
        currentIndex++;
      }

      this.intervalId = setInterval(() => {
        autoScrollStep.call(this);
      }, 2000); // 设置每两秒移动一次
    }
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  }
};
</script>

#### CSS 样式调整
适当配置样式使得视觉上更美观并适应不同设备屏幕尺寸。

<style scoped>
.list-item {
  padding: 10px;
  border-bottom: solid 1px #ccc;
}

/* 自定义其他必要样式 */
</style>

此方法能够满足大多数情况下对于列表上下无缝滚动的需求，并且可以根据实际应用场景灵活修改参数如滚动速度、显示数量等特性。