小米官网轮播图侧边栏动态添加-较为简单的操作（拿json数据有点枯燥，有点多）

最新推荐文章于 2022-06-15 09:01:22 发布

写bug的第一年

最新推荐文章于 2022-06-15 09:01:22 发布

阅读量967

点赞数

文章标签： ajax html css javascript

本文链接：https://blog.csdn.net/D_98k/article/details/120764561

版权

小米官网的侧边栏里面的数据可以说是多到离谱，如果让我们自己写静态页面的话，那代码量就多到离谱，后面的购物车还没办法用到这些数据，使用动态添加数据其他页面也可以用到这些数据。

我这里是使用的json数据添加的方式，这是里面的一条数据，因为后面购物车和数据详情页也要用到这些数据，所以这里用到的只是其中两条

有了这些数据之后，唯一麻烦的事情来了，如何将他们排列进去

首先，我们来看一下我的结构，这是侧边栏其中的手机一栏（结构简单）：

类名为hidden的div盒子就是后面需要装下24个手机以及手机名字的大盒子，最初是隐藏起来的，

然后就获取标签，这个不多说。

然后再用foreach方法对li进行遍历：

有一个地方要注意一下，这个地方不能使用onmouseover事件，不然就会冒泡，用onmouseenter就可以避免冒泡。

用ajax方法获取数据（后面会附上ajax）：

这个i是因为我有十个json文件（侧边栏的十个内容对应十个文件），文件名依次按顺序排列的，所以我这样

每一步都用log输出一下，看是否正确

这里是放数据的四个ul，6个一组，判定，再放进去

最后再将反引号中的数据放入ul中：

这样就将数据动态添加到了指定的div中了至于css样式这些就不用多提了（其实是我比较懒，不想写css）

完整的代码（js）：

<script>

                //动态向轮播左侧边栏中添加数据
                var li = document.querySelectorAll('.list1-ul-li')
                var hidden = document.querySelectorAll('.hidden')

                // console.log(hidden);
                li.forEach(function (v, i) {
                    v.onmouseenter = function () {
                        let html1 = '';
                        let html2 = '';
                        let html3 = '';
                        let html4 = '';
                        axios.get(`./js/goods${i+1}.json`).then(data => {
                            // console.log(JSON.parse(data));
                            var ul = hidden[i].querySelectorAll('ul')
                            // console.log(ul);
                            JSON.parse(data).forEach((goods, j) => {//其中有四个ul横向排列，判断拿来的当前数据的编号，将其放入对应的ul中
                                //   console.log(goods.id);
                                // console.log(j);
                                if (j >= 0 && j <= 5) {
                                    html1 += `
                             <li>
                                 <a href="cart.html?${goods.id}">
                                        <img src="${goods.src}" alt="">
                                        <span>${goods.name}</span>
                                  </a>
                            </li>
                `
                                } else if (j >= 6 && j <= 11) {
                                    html2 += `
                                <li><a href="cart.html?${goods.id}">
                                    <img src="${goods.src}" alt="">
                                 <span>${goods.name}</span>
                             </a></li>
                             `
                                } else if (j >= 12 && j <= 17) {
                                    html3 += ` 
                                    <li><a href="cart.html?${goods.id}">
                                            <img src="${goods.src}" alt="">
                                            <span>${goods.name}</span>
                                        </a>
                                    </li>
                                    `
                                } else if (j >= 18 && j <= 23) {
                                    html4 += `
                                     <li><a href="cart.html?${goods.id}">
                                               <img src="${goods.src}" alt="">
                                              <span>${goods.name}</span></a>
                                          </li>`
                                }
                            });

                            // 将数据追加到侧边栏中
                            ul[0].innerHTML = html1;
                            ul[1].innerHTML = html2;
                            ul[2].innerHTML = html3
                            ul[3].innerHTML = html4;

                            // console.log(ul[0]);

                            // console.log(html);
                            // hidden[i].innerHTML = html;
                        })
                    }
                })
            </script>

（html）

  <div class="list1">
            <ul>
                <li class="list1-ul-li">
                    <div>手机 </div>
                    <div>></div>
                    <div class="hidden">
                        <ul class="one"></ul>
                        <ul class="two"></ul>
                        <ul class="three"></ul>
                        <ul class="fuor"></ul>
                    </div>
                </li>
                <li class="list1-ul-li">
                    <div>电视</div>
                    <div>></div>
                    <div class="hidden">

                        <ul class="one"></ul>
                        <ul class="two"></ul>
                        <ul class="three"></ul>
                        <ul class="fuor"></ul>
                    </div>
                </li>
                <li class="list1-ul-li">
                    <div>笔记本 平板</div>
                    <div>></div>
                    <div class="hidden">
                        <ul class="one"></ul>
                        <ul class="two"></ul>
                        <ul class="three"></ul>
                        <ul class="fuor"></ul>

                    </div>
                </li>
                <li class="list1-ul-li">
                    <div>家电</div>
                    <div>></div>
                    <div class="hidden">
                        <ul class="one"></ul>
                        <ul class="two"></ul>
                        <ul class="three"></ul>
                        <ul class="fuor"></ul>

                    </div>
                </li>
                <li class="list1-ul-li">
                    <div>出行 穿戴</div>
                    <div>></div>
                    <div class="hidden">
                        <ul class="one"></ul>
                        <ul class="two"></ul>
                        <ul class="three"></ul>
                        <ul class="fuor"></ul>

                    </div>
                </li>
                <li class="list1-ul-li">
                    <div>智能 路由器</div>
                    <div>></div>
                    <div class="hidden">

                        <ul class="one"></ul>
                        <ul class="two"></ul>
                        <ul class="three"></ul>
                        <ul class="fuor"></ul>
                    </div>
                </li>
                <li class="list1-ul-li">
                    <div>电源 配件</div>
                    <div>></div>
                    <div class="hidden">
                        <ul class="one"></ul>
                        <ul class="two"></ul>
                        <ul class="three"></ul>
                        <ul class="fuor"></ul>

                    </div>
                </li>
                <li class="list1-ul-li">
                    <div>健康 儿童</div>
                    <div>></div>
                    <div class="hidden">
                        <ul class="one"></ul>
                        <ul class="two"></ul>
                        <ul class="three"></ul>
                        <ul class="fuor"></ul>

                    </div>
                </li>
                <li class="list1-ul-li">
                    <div>耳机 音箱</div>
                    <div>></div>
                    <div class="hidden">

                        <ul class="one"></ul>
                        <ul class="two"></ul>
                        <ul class="three"></ul>
                        <ul class="fuor"></ul>
                    </div>
                </li>
                <li class="list1-ul-li">
                    <div>生活 箱包</div>
                    <div>></div>
                    <div class="hidden">
                        <ul class="one"></ul>
                        <ul class="two"></ul>
                        <ul class="three"></ul>
                        <ul class="fuor"></ul>
                    </div>
                </li>
            </ul>
</div>

ajax.js文件：注意路径问题哟

class axios {
    static get (url, data) {
      return axios.http('get', url, data)
    }
  
    static post (url, data) {
      return axios.http('post', url, data)
    }
  
    static http (type, url, data) {
      let params = null
      if (data) {
        // 临时在 params 中保存数组数据
        params = []
        // 迭代 data 对象中各属性 例：{username: 'admin', password: 'admin'}
        for (const key in data) {
          params.push(`${key}=${data[key]}`) // ['username=admin', 'password=admin']
        }
        // 将数组中每个元素以 `&` 符号拼接，生成查询字符串结构
        params = params.join('&'); // username=admin&password=admin
      }
      // 如果是 GET 数据，并存在向后端发送的数据，则将查询字符串以 ? 号拼接在 URL 后
      if (type === 'GET' && params) {
        url += `?${params}`
        params = null
      }
  
      return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open(type, url);
        // post 需要设置头部
        type == 'post' && xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(params);
        xhr.onreadystatechange = () => {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              // 成功
              resolve(xhr.response)
            } else {
              // 失败
              reject('服务器错误');
            }
  
            // console.log(xhr.response);
  
          }
        }
  
      }).catch((e) => {});
    }
  }
  
  function $$ (tag) {
    return document.querySelector(tag)
  }

最后，希望对大家有点帮助吧，如果有什么问题的话可以下面留言，我会改（弱小/无助/瑟瑟发抖）

写bug的第一年

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
小米官网轮播图侧边栏动态添加-较为简单的操作（拿json数据有点枯燥，有点多）

小米官网的侧边栏里面的数据可以说是多到离谱，如果让我们自己写静态页面的话，那代码量就多到离谱，后面的购物车还没办法用到这些数据，使用动态添加数据其他页面也可以用到这些数据。我这里是使用的json数据添加的方式，这是里面的一条数据，因为后面购物车和数据详情页也要用到这些数据，所以这里用到的只是其中两条有了这些数据之后，唯一麻烦的事情来了，如何将他们排列进去首先，我们来看一下我的结构，这是侧边栏其中的手机一栏（结构简单）：类名为hidden的div盒子就是后面需要装下24个手机...
复制链接

扫一扫