JavaScriptによるファンインターフェイスの実装-フロントエンドQ&A-php.cn

JavaScriptによるファンインターフェイスの実装

王林

リリース： 2023-05-17 21:46:37

オリジナル

611 人が閲覧しました

ソーシャルメディアの人気により、ファンのグループを持つことが多くの人々の目標になりました。一部のソーシャルメディアプラットフォームでは、ファンインターフェイスを使用すると、ユーザーがファンをより適切に管理できるようになります。この記事では、JavaScriptを使用してシンプルなファンインターフェイスを実装する方法を紹介します。

インターフェースの計画

見た目が良く使いやすいファンインターフェースを実現するには、まずインターフェースのレイアウトと機能を計画する必要があります。ファンインターフェイスには通常、次の機能が含まれています。

ファンのアバターとニックネームの表示
ファンの注目ステータスの表示
ファンの検索とフィルター
バッチファンの操作（フォロー解除など）

ファンリストの取得

上記の機能を実装する前に、まずユーザーのファンリストを取得する必要があります。ソーシャルメディアプラットフォームが異なると、フォロワーリストを取得する方法が異なる場合があります。一般に、これはインターフェイスまたはクローラーを使用して実現できます。

インターフェイス経由でファンリストを取得するコード例:

function getFansList(userId, pageNum) {
  // 调用接口获取粉丝列表
  const url = `https://example.com/api/getFansList?userId=${userId}&pageNum=${pageNum}`;
  return fetch(url).then(response => response.json());
}

ログイン後にコピー

コード内の getFansList 関数は、渡された userId および pageNum パラメーターに基づいて、対応するユーザーのファンリストを取得できます。インターフェイスによって返されるデータは通常配列であり、各要素にはファンのアバター、ニックネーム、フォロー状況などの情報が含まれます。

ファンリストのレンダリング

ファンリストを取得した後、データをインターフェイスにレンダリングする必要があります。 JavaScript では、DOM 操作を使用してインターフェイスをレンダリングできます。

コード例:

function renderFansList(list) {
  // 获取ul元素
  const ul = document.querySelector('#fansList');
  // 清空ul元素
  ul.innerHTML = '';
  // 遍历粉丝列表，创建li元素并添加到ul元素中
  for (let i = 0; i < list.length; i++) {
    const fan = list[i];
    const li = document.createElement('li');
    li.innerHTML = `
      <img src="${fan.avatar}">
      <div>${fan.nickname}</div>
      <button class="${fan.isFollowing ? 'following' : 'follow'}">${fan.isFollowing ? '已关注' : '关注'}</button>
    `;
    ul.appendChild(li);
  }
}

ログイン後にコピー

コード内の renderFansList 関数は、ES6 テンプレート文字列構文を使用して、ファンのアバター、ニックネーム、フォローステータス、その他の情報を li 要素にレンダリングし、 ul 要素内。

検索およびフィルター機能の追加

ユーザーがファンを見つけてフィルターしやすくするために、検索およびフィルター機能を追加できます。検索機能ではファンのニックネームによる検索、フィルタリング機能ではファンの注目状況による絞り込みが可能です。

コード例:

const input = document.querySelector('#searchInput');
const btnFilter = document.querySelectorAll('.filter-btn');

// 添加搜索功能
function searchFans(keyword, list) {
  const result = list.filter(fan => fan.nickname.includes(keyword));
  renderFansList(result);
}

input.addEventListener('input', function(e) {
  const keyword = e.target.value.trim();
  if (keyword) {
    searchFans(keyword, fansList);
  } else {
    renderFansList(fansList);
  }
});

// 添加过滤功能
function filterFans(status, list) {
  const result = list.filter(fan => {
    if (status === 'all') {
      return true;
    } else if (status === 'following') {
      return fan.isFollowing;
    } else {
      return !fan.isFollowing;
    }
  });
  renderFansList(result);
}

for (let i = 0; i < btnFilter.length; i++) {
  btnFilter[i].addEventListener('click', function(e) {
    const status = e.target.dataset.status;
    filterFans(status, fansList);
  });
}

ログイン後にコピー

コード内の searchFans 関数と filterFans 関数は、それぞれファンの検索とフィルターに使用されます。検索機能を追加するときは、入力イベントをリッスンしてキーワードを取得し、searchFans 関数を呼び出してファンリストをフィルターします。フィルタリング機能を追加するときは、filter-btn のクリックイベントをリッスンし、さまざまな data-status 属性値に基づいてフィルタリングします。

バッチ操作機能の追加

最後に、ユーザーが複数のファンを一度にフォロー解除できるようにするため、バッチ操作機能を追加する必要があります。バッチ操作を実現するには、各 li 要素にチェックボックスを追加し、インターフェースの下部に「フォロー解除」ボタンを追加します。

コード例:

const btnBatch = document.querySelector('#batchBtn');

// 添加复选框和批量操作功能
function addCheckbox(list) {
  const ul = document.querySelector('#fansList');
  for (let i = 0; i < list.length; i++) {
    const li = ul.children[i];
    const input = document.createElement('input');
    input.type = 'checkbox';
    input.value = i;
    li.insertBefore(input, li.firstChild);
  }
  // 监听“取消关注”按钮的点击事件
  btnBatch.addEventListener('click', function() {
    const inputs = document.querySelectorAll('input[type="checkbox"]');
    for (let i = 0; i < inputs.length; i++) {
      const input = inputs[i];
      if (input.checked) {
        const fan = list[input.value];
        cancelFollowing(fan.id).then(() => {
          fan.isFollowing = false;
          input.checked = false;
          li = input.parentNode;
          li.querySelector('button').className = 'follow';
          li.querySelector('button').textContent = '关注';
        });
      }
    }
  });
}

ログイン後にコピー

コード内の addCheckbox 関数は、各 li 要素にチェックボックスを追加し、下部に「フォロー解除」ボタンを追加します。追加が完了したら、btnBatch のクリックイベントをリッスンし、すべてのチェックボックスを調べます。チェックボックスが選択されている場合は、cancelFollowing 関数を呼び出して対応するファンのアテンションをキャンセルし、li のフォローステータスとボタンテキストを更新します。要素。

この時点で、シンプルなファンインターフェイスが完成しました。 JavaScript を使用してファンインターフェイスを実装するのは複雑ですが、DOM 操作と非同期プログラミングに習熟していれば実装することは難しくありません。

以上がJavaScriptによるファンインターフェイスの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。