当前位置：首页 > JavaScript

js实现商品展示页

2026-01-31 01:16:11JavaScript

js实现商品展示页

商品展示页的实现

商品展示页通常包含商品列表、图片展示、价格、描述等信息。使用JavaScript可以实现动态加载、排序、筛选等功能。

基础HTML结构

<div id="product-container">
  <div class="product-filter">
    <select id="sort-by">
      <option value="price-asc">价格从低到高</option>
      <option value="price-desc">价格从高到低</option>
    </select>
  </div>
  <div class="product-list" id="product-list"></div>
</div>

CSS样式设计

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.product-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-info {
  padding: 15px;
}

.product-price {
  color: #e63946;
  font-weight: bold;
  margin: 10px 0;
}

JavaScript实现

数据获取与渲染

// 模拟商品数据
const products = [
  {
    id: 1,
    name: "无线耳机",
    price: 199,
    image: "https://example.com/earphones.jpg",
    description: "高保真音质，降噪功能"
  },
  // 更多商品...
];

function renderProducts(productsToRender) {
  const productList = document.getElementById('product-list');
  productList.innerHTML = '';

  productsToRender.forEach(product => {
    const productCard = document.createElement('div');
    productCard.className = 'product-card';
    productCard.innerHTML = `
      <img src="${product.image}" alt="${product.name}" class="product-image">
      <div class="product-info">
        <h3>${product.name}</h3>
        <p>${product.description}</p>
        <div class="product-price">¥${product.price}</div>
        <button class="add-to-cart" data-id="${product.id}">加入购物车</button>
      </div>
    `;
    productList.appendChild(productCard);
  });
}

// 初始渲染
renderProducts(products);

排序功能实现

document.getElementById('sort-by').addEventListener('change', function(e) {
  const sortedProducts = [...products];

  switch(e.target.value) {
    case 'price-asc':
      sortedProducts.sort((a, b) => a.price - b.price);
      break;
    case 'price-desc':
      sortedProducts.sort((a, b) => b.price - a.price);
      break;
  }

  renderProducts(sortedProducts);
});

购物车功能

document.addEventListener('click', function(e) {
  if(e.target.classList.contains('add-to-cart')) {
    const productId = parseInt(e.target.getAttribute('data-id'));
    const product = products.find(p => p.id === productId);
    // 这里可以添加购物车逻辑
    console.log(`已添加 ${product.name} 到购物车`);
  }
});

高级功能扩展

懒加载实现

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if(entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('.product-image').forEach(img => {
  observer.observe(img);
});

分页加载

let currentPage = 1;
const itemsPerPage = 10;

function loadMoreProducts() {
  const start = (currentPage - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  const productsToShow = products.slice(0, end);
  renderProducts(productsToShow);

  if(end >= products.length) {
    window.removeEventListener('scroll', scrollHandler);
  }
}

function scrollHandler() {
  if((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
    currentPage++;
    loadMoreProducts();
  }
}

window.addEventListener('scroll', scrollHandler);
loadMoreProducts();

响应式设计优化

function handleResize() {
  const productList = document.getElementById('product-list');
  if(window.innerWidth < 768) {
    productList.style.gridTemplateColumns = 'repeat(auto-fill, minmax(150px, 1fr))';
  } else {
    productList.style.gridTemplateColumns = 'repeat(auto-fill, minmax(250px, 1fr))';
  }
}

window.addEventListener('resize', handleResize);
handleResize();

以上代码实现了一个完整的商品展示页，包含基本展示、排序、分页加载等功能。实际项目中需要根据具体需求进行调整，比如连接真实API获取数据、添加更多筛选条件等。

js实现商品展示页