【每日一练】克鲁赛德战记小案例

 

思路分析：

1. 点击每一个tab栏：tab栏切换

①排他思想修改样式

②获取当前点击的type类型

③ajax发送请求

④服务器响应之后,渲染页面

2.网络请求loading动画思路

原理：gif动图

显示：ajax发送请求之前

隐藏：ajax响应之后

js代码：

let liList = document.querySelectorAll('.nav li')
    let cover = document.querySelector('.cover')

for (let i = 0; i < liList.length; i++) {
      //1.类名排他
      liList[i].onclick = function () {
        document.querySelector('.active').classList.remove('active')
        this.classList.add('active')
        //2.获取点击的li元素的span文本
        let type = this.children[1].innerText
        //发送请求ajax之前，显示遮罩层loading
        cover.style.display = 'block'
        //3.ajax发送请求
        axios({
          url: 'https://autumnfish.cn/api/cq/category',
          method: 'get',
          params: { type }
        }).then(res => {
          //成功回调
          console.log(res)
          //定时器
          setTimeout(function () {
            cover.style.display = 'none'
            //渲染页面
            renderData(res.data.data.heros)
          }, 300)
        })
      }
}

    //页面一加载，就默认点击第一个
liList[0].onclick()

    //渲染封装
    const renderData = arr => {
      document.querySelector('.cq-list>tbody').innerHTML = arr.map(item => {
        return `<tr>
            <td>
            <img class="icon" src="${item.heroIcon}" alt="" />
            <span>
                ${item.heroName}
            </span>
          </td>
          <td>
            <img class="skill" src="${item.skillIcon}" alt="" />
            ${item.skillName}
          </td>
          <td>
            <img class="weapon" src="${item.weaponIcon}" alt="" />
            ${item.weaponName}
          </td>
        </tr>`}).join("")
}