当前位置：首页 > JavaScript

js实现滚动订单信息

2026-01-31 01:19:33JavaScript

实现滚动订单信息的方法

使用CSS动画实现滚动

通过CSS的@keyframes和animation属性可以实现简单的滚动效果。创建一个包含订单信息的容器，设置动画使其垂直或水平移动。

js实现滚动订单信息

<div class="scroll-container">
  <div class="order-list">
    <div>订单1: 商品A - ￥100</div>
    <div>订单2: 商品B - ￥200</div>
    <div>订单3: 商品C - ￥300</div>
  </div>
</div>

<style>
.scroll-container {
  height: 100px;
  overflow: hidden;
}
.order-list {
  animation: scroll 10s linear infinite;
}
@keyframes scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}
</style>

使用JavaScript实现动态滚动

通过JavaScript定时修改元素的scrollTop或transform属性，可以实现更灵活的滚动控制。以下是一个垂直滚动的示例：

js实现滚动订单信息

const container = document.querySelector('.scroll-container');
const orderList = document.querySelector('.order-list');
let scrollPosition = 0;

function scrollOrders() {
  scrollPosition += 1;
  if (scrollPosition >= orderList.scrollHeight - container.clientHeight) {
    scrollPosition = 0;
  }
  container.scrollTop = scrollPosition;
  requestAnimationFrame(scrollOrders);
}

scrollOrders();

使用第三方库（如Swiper）

如果需要更复杂的滚动效果，可以使用第三方库如Swiper.js。Swiper提供了丰富的配置选项和动画效果。

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">订单1: 商品A - ￥100</div>
    <div class="swiper-slide">订单2: 商品B - ￥200</div>
    <div class="swiper-slide">订单3: 商品C - ￥300</div>
  </div>
</div>

<script>
  new Swiper('.swiper-container', {
    direction: 'vertical',
    loop: true,
    autoplay: {
      delay: 1000,
      disableOnInteraction: false,
    },
  });
</script>

动态加载订单数据

如果需要从后端获取订单数据并动态滚动显示，可以使用以下方法：

async function loadAndScrollOrders() {
  const response = await fetch('/api/orders');
  const orders = await response.json();
  const container = document.querySelector('.order-list');

  orders.forEach(order => {
    const div = document.createElement('div');
    div.textContent = `订单${order.id}: ${order.name} - ￥${order.price}`;
    container.appendChild(div);
  });

  setInterval(() => {
    const firstChild = container.firstChild;
    container.appendChild(firstChild.cloneNode(true));
    container.removeChild(firstChild);
  }, 2000);
}

loadAndScrollOrders();