大屏列表滚动效果

订单历史列表组件 (OrderHistoryList)

功能特性

• ✅ 支持自动滚动
• ✅ 平滑滚动动画
• ✅ 响应式设计
• ✅ 自定义滚动速度
• ✅ 支持手动控制
• ✅ 美观的UI设计

使用方法

基本用法

<template>
  <OrderHistoryList 
    :orderData="orderHistoryData"
    :autoScroll="true"
    :scrollSpeed="4000"
    :visibleRows="5"
  />
</template>

<script>
import OrderHistoryList from './orderHistoryList.vue'

export default {
  components: {
    OrderHistoryList
  },
  data() {
    return {
      orderHistoryData: [
        {
          id: 1,
          date: '2025-07-30 (周三)',
          amount: 1988
        },
        {
          id: 2,
          date: '2025-07-31 (周四)',
          amount: 1988
        }
        // ... 更多数据
      ]
    }
  }
}
</script>

Props 参数

参数	类型	默认值	说明
orderData	Array	[]	订单数据数组
autoScroll	Boolean	true	是否启用自动滚动
scrollSpeed	Number	3000	滚动速度（毫秒）
visibleRows	Number	5	显示的行数

数据格式

{
  id: 1,           // 唯一标识
  date: '2025-07-30 (周三)',  // 日期字符串
  amount: 1988     // 订单金额
}

方法

组件提供以下方法供父组件调用：

// 暂停自动滚动
this.$refs.orderList.pauseAutoScroll()

// 恢复自动滚动
this.$refs.orderList.resumeAutoScroll()

// 滚动到指定位置
this.$refs.orderList.scrollToPosition(3)

// 开始自动滚动
this.$refs.orderList.startAutoScroll()

// 停止自动滚动
this.$refs.orderList.stopAutoScroll()

样式定制

组件使用 CSS 变量，可以通过以下方式自定义样式：

.order-history-list {
  --primary-color: #64b5f6;
  --success-color: #4caf50;
  --background-color: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}

注意事项

1. 确保父容器有足够的高度
2. 数据为空时会显示默认的演示数据
3. 自动滚动会在组件销毁时自动停止
4. 支持触摸设备的滚动操作

浏览器兼容性

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

主要实现组件代码