Cara menggunakan Layui untuk membangunkan halaman klasifikasi produk pusat membeli-belah yang menyokong carian tag-tutorial js-php.cn

Cara menggunakan Layui untuk membangunkan halaman klasifikasi produk pusat membeli-belah yang menyokong carian tag

WBOY

Lepaskan： 2023-10-27 17:57:31

asal

868 orang telah melayarinya

Cara menggunakan Layui untuk membangunkan halaman klasifikasi produk pusat membeli-belah yang menyokong carian tag

Dengan perkembangan Internet, e-dagang telah menjadi kaedah membeli-belah yang biasa. Di pusat membeli-belah, adalah sangat penting untuk mengklasifikasikan produk, yang membantu pengguna mencari produk yang mereka inginkan dengan cepat. Dalam halaman klasifikasi produk, untuk memberikan pengalaman pengguna yang lebih baik, ia adalah pilihan yang baik untuk menyokong fungsi carian tag. Artikel ini akan memperkenalkan cara menggunakan Layui untuk membangunkan halaman klasifikasi produk pusat membeli-belah yang menyokong carian teg dan menyediakan contoh kod khusus.

Layui ialah rangka kerja UI bahagian hadapan yang ringan yang mudah digunakan dan mudah untuk dimulakan. Ia menyediakan banyak komponen, termasuk jadual, kotak drop-down, dll. Menggunakan halaman klasifikasi produk Bandar Pemaju Layui, anda boleh merealisasikan reka letak dan kesan interaktif halaman dengan cepat. Berikut ialah struktur direktori projek contoh:

- index.html
- js
  - layui.js
  - category.js
  - jquery.min.js
- css
  - layui.css
  - category.css

Salin selepas log masuk

Mula-mula, perkenalkan fail berkaitan Layui dalam fail index.html:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>商城商品分类页面</title>
  <link rel="stylesheet" href="css/layui.css">
</head>

<body>
  <div class="layui-container">
    <div class="layui-row">
      <div class="layui-col-md8">
        <div class="layui-collapse" lay-accordion>
          <!-- 商品分类列表 -->
          <div class="layui-colla-item">
            <h2 class="layui-colla-title">电子产品</h2>
            <div class="layui-colla-content layui-show">
              <!-- 商品列表 -->
              <div id="productList" class="layui-row"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md4">
        <!-- 标签搜索 -->
        <div class="layui-card">
          <div class="layui-card-header">标签搜索</div>
          <div class="layui-card-body">
            <input type="text" id="searchTag" class="layui-input" placeholder="请输入标签">
            <button class="layui-btn layui-btn-sm" onclick="searchByTag()">搜索</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="js/jquery.min.js"></script>
  <script src="js/layui.js"></script>
  <script src="js/category.js"></script>
</body>

</html>

Salin selepas log masuk

Tulis kod logik JavaScript dalam fail category.js untuk memuatkan dan mencari data produk secara dinamik:

// 商品分类数据
var categoryData = [
  {
    name: "手机",
    products: [
      { name: "iPhone X", tags: ["高端", "苹果"] },
      { name: "小米10", tags: ["性价比高", "小米"] },
      { name: "华为P40", tags: ["华为"] }
    ]
  },
  {
    name: "电视",
    products: [
      { name: "小米电视", tags: ["性价比高", "小米"] },
      { name: "创维电视", tags: ["创维"] },
      { name: "索尼电视", tags: ["索尼"] }
    ]
  }
];

// 根据标签搜索商品
function searchByTag() {
  var tag = $("#searchTag").val();
  var productList = "";
  
  categoryData.forEach(function(category) {
    category.products.forEach(function(product) {
      if (product.tags.indexOf(tag) !== -1) {
        productList += "<div class='layui-col-md3'>" + product.name + "</div>";
      }
    });
  });
  
  $("#productList").html(productList);
}

// 加载商品分类列表
function loadCategory() {
  categoryData.forEach(function(category) {
    var categoryItem = "<div class='layui-colla-item'>"
      + "<h2 class='layui-colla-title'>" + category.name + "</h2>"
      + "<div class='layui-colla-content'>"
      + "<div class='layui-row'>";
      
    category.products.forEach(function(product) {
      categoryItem += "<div class='layui-col-md3'>" + product.name + "</div>";
    });
    
    categoryItem += "</div></div></div>";
    $(".layui-collapse").append(categoryItem);
  });
}

$(function() {
  loadCategory();
});

Salin selepas log masuk

Tentukan gaya halaman dalam kategori.fail css:

.layui-container {
  padding: 20px;
}

.layui-row {
  margin: 10px 0;
}

.layui-col-md8 {
  padding-right: 10px;
}

.layui-card {
  margin-bottom: 10px;
}

#searchTag {
  width: 200px;
  display: inline-block;
}

Salin selepas log masuk

Di atas ialah contoh kod khusus menggunakan Layui untuk membangunkan halaman kategori produk pusat membeli-belah yang menyokong carian tag. Melalui contoh ini, anda dapat melihat bahawa anda boleh menggunakan Layui untuk melaksanakan reka letak dan kesan interaktif halaman klasifikasi produk dengan cepat, dan menyokong fungsi carian teg.

Atas ialah kandungan terperinci Cara menggunakan Layui untuk membangunkan halaman klasifikasi produk pusat membeli-belah yang menyokong carian tag. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!