如何使用Layui开发一个支持标签搜索的商城商品分类页面

前端开发教程 2025-02-03 0

随着互联网的发展，电子商务已成为一种常见的购物方式。在一个商城中，对商品进行分类是十分重要的，这有助于用户快速找到自己想要的商品。而在商品分类页面中，为了提供更好的用户体验，支持标签搜索功能是一种不错的选择。本文将介绍如何使用Layui开发一个支持标签搜索的商城商品分类页面，并提供具体代码示例。

Layui是一款轻量级的前端UI框架，易用、易上手。它提供了丰富的组件，包括表格、下拉框等。使用Layui开发商城商品分类页面，可以快速实现页面的布局和交互效果。下面是一个示例项目的目录结构：

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

首先，在index.html文件中引入Layui的相关文件：

<!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>

在category.js文件中编写JavaScript逻辑代码，用于动态加载和搜索商品数据：

// 商品分类数据
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();
});

在category.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;
}

以上就是使用Layui开发一个支持标签搜索的商城商品分类页面的具体代码示例。通过这个示例，可以看到使用Layui可以快速实现商品分类页面的布局和交互效果，并且支持标签搜索功能。

以上就是如何使用Layui开发一个支持标签搜索的商城商品分类页面的详细内容，更多请关注双恒网络其它相关文章！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。