尝试使用片段在底部导航视图布局中实现JSON

{
  "items": [
    {
      "icon": "home",
      "label": "首页"
    },
    {
      "icon": "search",
      "label": "搜索"
    },
    {
      "icon": "profile",
      "label": "个人资料"
    }
  ]
}

// 异步加载JSON文件
fetch('nav.json')
  .then(response => response.json())
  .then(data => {
    // 获取底部导航视图的容器元素
    const navContainer = document.getElementById('nav-container');

    // 循环创建导航项
    data.items.forEach(item => {
      // 创建导航项的图标元素
      const icon = document.createElement('i');
      icon.className = `icon-${item.icon}`;

      // 创建导航项的标签元素
      const label = document.createElement('span');
      label.textContent = item.label;

      // 创建导航项的容器元素
      const itemContainer = document.createElement('div');
      itemContainer.className = 'nav-item';
      itemContainer.appendChild(icon);
      itemContainer.appendChild(label);

      // 将导航项添加到导航视图的容器中
      navContainer.appendChild(itemContainer);
    });
  });