JavaScript melaksanakan antara muka kipas

Dengan populariti media sosial, mempunyai sekumpulan peminat telah menjadi matlamat ramai orang. Untuk sesetengah platform media sosial, mempunyai antara muka peminat membolehkan pengguna mengurus peminat mereka dengan lebih baik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan antara muka kipas yang mudah.

1. Antara muka perancangan

Untuk mencapai antara muka kipas yang cantik dan mudah digunakan, kita perlu merancang reka letak dan fungsi antara muka terlebih dahulu. Antara muka kipas secara amnya merangkumi fungsi berikut:

• Paparkan avatar dan nama panggilan peminat
• Paparkan status perhatian peminat
• Cari dan tapis peminat
• Operasi kelompok pada peminat (seperti berhenti mengikuti)

2. Dapatkan senarai peminat

Sebelum melaksanakan fungsi di atas, kita perlu mendapatkan senarai peminat pengguna pertama. Untuk platform media sosial yang berbeza, cara untuk mendapatkan senarai pengikut mungkin berbeza. Secara umumnya, ini boleh dicapai menggunakan antara muka atau perangkak.

Contoh kod untuk mendapatkan senarai peminat melalui antara muka:

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

Fungsi getFansList dalam kod boleh mendapatkan senarai peminat pengguna yang sepadan berdasarkan parameter userId dan pageNum yang diluluskan. Data yang dikembalikan oleh antara muka biasanya adalah tatasusunan, dan setiap elemen mengandungi maklumat seperti avatar peminat, nama panggilan dan status ikut.

3. Memberi senarai peminat

Selepas mendapatkan senarai peminat, kami perlu memaparkan data ke antara muka. Dalam JavaScript, anda boleh menggunakan operasi DOM untuk memaparkan antara muka.

Contoh kod:

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);
  }
}

Fungsi renderFansList dalam kod menggunakan sintaks rentetan templat ES6 untuk memaparkan avatar, nama panggilan, status ikuti dan maklumat lain ke dalam elemen li dan menambahnya pada dalam unsur ul.

4. Tambah fungsi carian dan penapis

Untuk memudahkan pengguna mencari dan menapis peminat, kami boleh menambah fungsi carian dan penapis. Fungsi carian boleh mencari berdasarkan nama panggilan peminat, dan fungsi penapisan boleh menapis berdasarkan status perhatian peminat.

Contoh kod:

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);
  });
}

Fungsi searchFans dan filterFans dalam kod digunakan untuk mencari dan menapis peminat masing-masing. Apabila menambah fungsi carian, kami mendengar acara input untuk mendapatkan kata kunci dan memanggil fungsi searchFans untuk menapis senarai peminat. Apabila menambah fungsi penapisan, kami mendengar peristiwa klik penapis-btn dan penapis berdasarkan nilai atribut status data yang berbeza.

5. Tambah fungsi operasi kelompok

Akhir sekali, kami perlu menambah fungsi operasi kelompok untuk memudahkan pengguna menyahikut berbilang peminat pada satu masa. Untuk mencapai operasi kelompok, kami boleh menambah kotak semak pada setiap elemen li dan menambah butang "Nyahikut" di bahagian bawah antara muka.

Contoh kod:

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 = '关注';
        });
      }
    }
  });
}

Fungsi addCheckbox dalam kod menambah kotak pilihan pada setiap elemen li dan butang "Nyahikut" di bahagian bawah. Selepas penambahan selesai, kami mendengar acara klik btnBatch, melintasi semua kotak semak, dan jika kotak semak dipilih, panggil fungsi cancelFollowing untuk membatalkan perhatian peminat yang sepadan, dan kemas kini status ikuti dan teks butang li unsur.

Pada ketika ini, kami telah melengkapkan antara muka peminat yang ringkas. Walaupun rumit untuk melaksanakan antara muka kipas menggunakan JavaScript, tidak sukar untuk melaksanakannya Anda hanya perlu mahir dalam operasi DOM dan pengaturcaraan tak segerak.

Atas ialah kandungan terperinci JavaScript melaksanakan antara muka kipas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!