返回

Layui 2.9.2：构建交互式商品展示页，轻松掌握数据展示技巧

前端

构建一个交互式商品展示页：Layui框架实战

在当今电子商务蓬勃发展的时代，构建一个用户友好的商品展示页至关重要。Layui 2.9.2 框架凭借其强大的组件库和模板引擎，为构建交互式且响应迅速的商品展示页提供了理想的平台。

1. 搭建框架

首先，创建商品列表页的框架 。使用HTML、Layui CSS和JavaScript文件，以及Laytpl模板引擎文件。接下来，使用Layui的List组件 创建商品列表，为每个商品项添加必要的HTML结构，包括标题、价格、图片和详情链接。

<div class="layui-list">
  <!-- 商品列表项 -->
  <script type="text/html" id="tpl-item">
    <li class="layui-item">
      <div class="layui-item-content">
        <div class="layui-item-img">
          <img src="{{d.img}}" alt="{{d.title}}">
        </div>
        <div class="layui-item-text">
          <h3>{{d.title}}</h3>
          <p>{{d.price}}</p>
        </div>
        <div class="layui-item-action">
          <a href="{{d.detailUrl}}" class="layui-btn layui-btn-sm layui-btn-primary">查看详情</a>
        </div>
      </div>
    </li>
  </script>
</div>

2. 读取JSON数据

使用Ajax从服务器读取JSON格式 的商品数据。解析JSON数据为JavaScript对象，并将其传递给Laytpl模板引擎进行渲染。

$.ajax({
  url: 'data/goods.json',
  dataType: 'json',
  success: function(data) {
    laytpl(document.getElementById('tpl-item').innerHTML).render(data, function(html) {
      $('.layui-list').html(html);
    });
  }
});

3. 筛选功能

为了增强用户体验，实现根据商品名称或价格 进行筛选的功能。使用JavaScript的filter()方法过滤商品数组，并重新渲染筛选后的数据。

$('#filter-btn').on('click', function() {
  var keyword = $('#keyword').val();
  var type = $('#filter-type').val();
  var data = JSON.parse($('#data').val());

  var filteredData = data.filter(function(item) {
    if (type === 'name') {
      return item.title.indexOf(keyword) !== -1;
    } else if (type === 'price') {
      return item.price.indexOf(keyword) !== -1;
    }
  });

  laytpl(document.getElementById('tpl-item').innerHTML).render(filteredData, function(html) {
    $('.layui-list').html(html);
  });
});

4. 控制文本长度

对于较长的文本，如商品名称或，使用CSS的text-overflow属性 来限制显示长度，并用省略号表示超出部分。

.layui-item-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

5. 总结

通过Layui框架的强大功能，我们成功构建了一个交互式商品展示页 ，它可以动态加载和展示商品信息，支持商品名称和价格筛选，并限制过长文本的显示。

常见问题解答

Q1：如何使用Layui的List组件创建商品列表？
A1： 使用layui.list()方法，为ul元素创建列表组件。

Q2：如何解析JSON数据为JavaScript对象？
A2： 使用JSON.parse()方法，将JSON字符串转换为JavaScript对象。

Q3：filter()方法的语法是什么？
A3： filter(function(item) { /* ... */ })，其中item是数组中的每个元素，function()是过滤条件。

Q4：如何使用CSS限制文本长度并使用省略号？
A4： 使用text-overflow: ellipsis;属性和white-space: nowrap;属性。

Q5：Layui框架的优势是什么？
A5： 强大且轻量级的组件库、模板引擎、丰富的主题和简洁的API。