移动端多场景排名布局方案分享

2023-09-16 22:56:16

移动端排名组件的设计经常出现在各种场景中，例如游戏排行榜、比赛排名、社交媒体上的用户排名等。作为一名资深的前端开发工程师，我有幸参与过多个项目的排名组件设计工作，并积累了一些经验。今天，我想分享一种我常用的移动端排名布局方案，该方案简单易用，能够轻松应对各种复杂的排名场景。

方案概述

该方案的核心思想是将每个排名节点都放在视图中，然后根据用户的排名位置，控制其样式和显示隐藏。这样，无论用户的排名处于哪种情况，都能正确地展示对应的排名布局。

具体实现

首先，我们需要将排名节点按照一定的顺序排列在视图中。这里，我们可以使用 flex 布局来实现，这样可以方便地控制节点的位置和大小。

<div class="ranking-container">
  <div class="ranking-item">第一名</div>
  <div class="ranking-item">第二名</div>
  <div class="ranking-item">第三名</div>
  <div class="ranking-item">第四名</div>
  <div class="ranking-item">第五名</div>
</div>

接下来，我们需要根据用户的排名位置，控制排名节点的样式和显示隐藏。这里，我们可以使用 JavaScript 来实现。

const rankingContainer = document.querySelector('.ranking-container');
const rankingItems = document.querySelectorAll('.ranking-item');

// 获取用户的排名位置
const userRank = 3;

// 隐藏所有排名节点
for (const item of rankingItems) {
  item.style.display = 'none';
}

// 显示用户排名之前的排名节点
for (let i = 0; i < userRank; i++) {
  rankingItems[i].style.display = 'block';
}

// 显示用户排名之后的排名节点
for (let i = userRank + 1; i < rankingItems.length; i++) {
  rankingItems[i].style.display = 'block';
}

这样，我们就能够根据用户的排名位置，正确地展示对应的排名布局了。

扩展

该方案可以很容易地扩展到更复杂的场景。例如，我们可以添加一个 "更多" 按钮，当用户点击这个按钮时，可以展示所有排名节点。

<button class="more-button">更多</button>

const moreButton = document.querySelector('.more-button');

moreButton.addEventListener('click', () => {
  // 显示所有排名节点
  for (const item of rankingItems) {
    item.style.display = 'block';
  }
});