JS-part8.6-二级菜单渲染(仿小米)

最新推荐文章于 2023-04-09 15:50:12 发布

guanerkoushi

最新推荐文章于 2023-04-09 15:50:12 发布

阅读量474

点赞数 2

分类专栏： Web开发文章标签： javascript

本文链接：https://blog.csdn.net/xiaolei233/article/details/118649690

版权

Web开发专栏收录该内容

74 篇文章 4 订阅

订阅专栏

二级菜单渲染

分析数据结构
+ 类似于 data.js 的多维数组结构
[
    {
        标题：Mi Telefone
        list: [
            {
                图片
                描述
                价格
            },
            {
                图片
                描述
                价格
            }
        ]
    }

  代码实现
    1. 获取元素
      => .nav : 承载标题的
      => .goodsBox : 放二级菜单的商品盒子
    2. 根据数组渲染标题
      => 循环遍历数组，根据数组的成员创建 li 标签
      => 添加到 ul 里面
    3. 给每一个一级标题添加一个鼠标移入事件
      方案1：
        => 因为使用的是创建节点的方式
        => 创建的时候直接添加
      方案2：
        => 单独获取所有的 li
        => 但是一定要在插入页面之后获取
    4. 根据移入的不同渲染不同的二级菜单
      => 移入哪一个 li？ this
      => 我移入的这个 li 对应的数据是谁
        -> 在渲染页面的时候， 把 id 当成一个自定义属性，放在元素身上
      => 在移入事件里面，获取当前移入这个元素的 data-id 属性
      => 去数组里找到数据
    5. 用找到的二级数据列表来渲染页面
      => 拼接字符串的方式来渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./data.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ul,ol{
            list-style: none;
            }

        ul{
            width: 100%;
            height: 60px;
            text-align: center;
            overflow: hidden;
        }

        ul > li{
            float: left;
            line-height: 60px;
            width: 200px;
            background-color: orange;
            cursor: pointer;
            font-size: 30px;
        }

        div{
            width: 100%;
            height: 230px;
            border-top: 1px solid #333;
            border-bottom: 1px solid #333;
        }

        div > ol{
            width: 1226px;
            height: 100%;
            margin: 0 auto;
            overflow: hidden;
        }

        div > ol > li{
            width: calc(100% / 6);
            height: 100%;
            background-color: #fff;
            float: left;
        }
    </style>
</head>
<body>
    <ul class="nav"></ul>
    <div>
        <ol class="goodsBox"></ol>
    </div>

    <script>
       // 1. 获取元素
       var nav = document.querySelector('.nav')
       var goodsBox = document.querySelector('.goodsBox')

       // 2. 根据数组渲染标题
       // 准备一个文档碎片
       var frg = document.createDocumentFragment()
       dataList.forEach(function(item){
            // 创建 li
            var li = document.createElement('li')
            // 向 li 里面添加内容
            li.innerHTML = item.name

            // 4-1. 添加一个数据 id 在元素身上
            li.dataset.id = item.id

            // 把 li 放进文档碎片中
            frg.appendChild(li)
       })
       // 循环结束后，把 frg 的内容放到 ul 里面
       nav.appendChild(frg)

       // 3. 给每一个一级标题添加一个鼠标移入事件
       var list = nav.querySelectorAll('li') 
       list.forEach(function(item){
           item.onmouseover = function(){
               // 4-2. 获取元素身上记录的 data-id 属性
               var id = this.dataset.id - 0
               // 4-3. 去数组里找数据
               // 数组常用方法 filter
               // var secondList = dataList.filter(function(item){return item.id === id})[0]
               // 数组常用方法 find
               var secondList = dataList.find(function(item){return item.id === id}).list
               // console.log(secondList)

               // 5. 拼接字符串的方式来渲染页面
               var str = ''
               secondList.forEach(function(item){
                   str += `
                    <li>
                            <img src="${item.list_url}" alt="">
                            <p>${item.list_name}</p>
                            <p>${item.list_price.toFixed(2)}€</p>
                    </li>
                   `
               })
               // 插入到 ol 里面
               goodsBox.innerHTML = str
           }
       })
    </script>
</body>
</html>

data.js：

var dataList = [
    {
        "id": 1,
        "name": "Mi Telefone",
        "list": [
            {
                "list_id": 101,
                "list_name": "Mi 11 Ultra",
                "list_price": 1199,
                "list_url": "https://i01.appmifile.com/webfile/globalimg/DE_Jim/k1-White-1600.png?width=140&height=140"
            },
            {
                "list_id": 102,
                "list_name": "Mi 11 | 5G",
                "list_price": 699,
                "list_url": "https://i01.appmifile.com/webfile/globalimg/de-wm/K2-blue-front.png?width=140&height=140"
            },
            {
                "list_id": 103,
                "list_name": "Mi 11i | 5G",
                "list_price": 549,
                "list_url": "https://i01.appmifile.com/webfile/globalimg/JenniferK/K11-blue.png?width=140&height=140"
            },
            {
                "list_id": 104,
                "list_name": "Mi 11 Lite 5G",
                "list_price": 399,
                "list_url": "https://i01.appmifile.com/webfile/globalimg/JenniferK/K9-yellow.png?width=140&height=140"
            },
            {
                "list_id": 105,
                "list_name": "Mi 11 Lite",
                "list_price": 269,
                "list_url": "https://i01.appmifile.com/webfile/globalimg/DE_Jim/k1-White-1600.png?width=140&height=140"
            },
            {
                "list_id": 106,
                "list_name": "Mi 11 Ultra",
                "list_price": 1199,
                "list_url": "https://i01.appmifile.com/webfile/globalimg/DE_Jim/k1-White-1600.png?width=140&height=140"
            },
        ]
    },
    ...