当前位置：首页 > JavaScript

js实现滚动订单信息

2026-04-04 17:13:56JavaScript

实现滚动订单信息

使用JavaScript实现滚动订单信息可以通过多种方式完成，以下是一种常见的实现方法，基于DOM操作和CSS动画。

基本HTML结构

创建一个包含订单信息的容器，通常使用无序列表或div元素。

<div class="order-container">
  <ul class="order-list">
    <li>订单1：商品A - ￥100</li>
    <li>订单2：商品B - ￥200</li>
    <li>订单3：商品C - ￥300</li>
    <!-- 更多订单项 -->
  </ul>
</div>

CSS样式

为订单容器和列表添加样式，确保内容可以滚动。

.order-container {
  height: 200px;
  overflow: hidden;
  border: 1px solid #ccc;
}

.order-list {
  margin: 0;
  padding: 0;
  list-style: none;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

JavaScript动态更新

如果需要动态更新订单信息，可以通过JavaScript定时添加或修改内容。

const orderList = document.querySelector('.order-list');

// 模拟动态添加订单
function addOrder() {
  const orders = ['订单4：商品D - ￥400', '订单5：商品E - ￥500'];
  orders.forEach(order => {
    const li = document.createElement('li');
    li.textContent = order;
    orderList.appendChild(li);
  });
}

// 每5秒添加新订单
setInterval(addOrder, 5000);

平滑滚动效果

通过JavaScript控制滚动行为，实现更平滑的效果。

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

function scrollOrders() {
  scrollPosition += 1;
  if (scrollPosition >= list.scrollHeight - container.clientHeight) {
    scrollPosition = 0;
  }
  list.style.transform = `translateY(-${scrollPosition}px)`;
  requestAnimationFrame(scrollOrders);
}

scrollOrders();

使用第三方库

如果需要更复杂的功能，可以考虑使用第三方库如Swiper或iScroll。

js实现滚动订单信息

import Swiper from 'swiper';

const swiper = new Swiper('.order-container', {
  direction: 'vertical',
  loop: true,
  autoplay: {
    delay: 1000,
  },
});