Toplist详解

发布时间：2023-05-19

一、什么是Toplist

Toplist是一个列表组件，可以用来展示各种排行榜、热榜等信息。在网站、移动应用、电视等各种应用场景中都经常使用到。Toplist通常包括排名、图标、标题、描述等信息，允许用户点击查看更多详情。

二、Toplist的功能特点

  1. Toplist可以定义多种排序规则，例如按照点击量、评论数、收藏数、分享数等多种情况进行排序。
  2. Toplist支持不同类型的图标，可以使用自定义图标或者图标库中提供的图标。
  3. Toplist支持无限滚动，在用户到达页面底部时，会自动加载更多数据。
  4. Toplist支持自定义最大显示数量和每页显示数量。

三、Toplist的实现

Toplist的实现需要分为两部分：数据获取和页面渲染。

1. 数据获取

const getData = async (page, pageSize) => {
  const res = await axios.get('http://example.com/api/toplist', {
    params: {
      page,
      pageSize
    }
  });
  return res.data;
};

代码中使用axios获取api数据，并传递分页参数page和pageSize。返回数据格式为：

{
  "data": [
    {
      "id": 1,
      "name": "排名第一",
      "icon": "http://example.com/icon1.png",
      "desc": "这是排名第一的描述",
      "count": 9999
    },
    {
      "id": 2,
      "name": "排名第二",
      "icon": "http://example.com/icon2.png",
      "desc": "这是排名第二的描述",
      "count": 8888
    }
  ],
  "total": 100
}

2. 页面渲染

const renderToplist = async () => {
  const page = 1; // 默认为第一页
  const pageSize = 10; // 默认每页显示10条数据
  const data = await getData(page, pageSize);
  // 渲染列表
  let html = '';
  data.data.forEach((item, index) => {
    html += `
  <div class="item">
    <div class="rank">${index + 1}</div>
    <div class="info">
      <div class="name">${item.name}</div>
      <div class="desc">${item.desc}</div>
    </div>
    <div class="count">${item.count}</div>
  </div>`;
  });
  $('.toplist').append(html);
  // 绑定滚动事件
  $(window).on('scroll', async () => {
    if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
      const nextPage = page + 1;
      const moreData = await getData(nextPage, pageSize);
      if (moreData.data.length > 0) {
        data.data = data.data.concat(moreData.data);
        let moreHtml = '';
        moreData.data.forEach((item, index) => {
          moreHtml += `
  <div class="item">
    <div class="rank">${index + 1}</div>
    <div class="info">
      <div class="name">${item.name}</div>
      <div class="desc">${item.desc}</div>
    </div>
    <div class="count">${item.count}</div>
  </div>`;
        });
        $('.toplist').append(moreHtml);
      }
    }
  });
};

代码中使用jQuery操作DOM进行页面渲染，并绑定滚动事件，实现无限滚动加载。在每个数据项中，使用HTML和CSS进行样式定义，实现排列展示。

四、使用示例

在HTML页面中添加容器：

<div class="toplist"></div>

在JavaScript中调用renderToplist方法即可：

renderToplist();
推荐文章