完成效果

项目数据


通过ajax请求data中的数据然后通过js动态渲染到页面中
AJAX的封装

请求的主要代码

  function getInfo(index) {
   
    let message = null;
    switch (index) {
   
      case 0:
        $ajax({
   
          method: 'get',
          url: '../data/newest.json',
          success: function (data) {
   
            message = JSON.parse(data).list;
            addMessage(message);
          }
        })
        break;
      case 1:
        $ajax({
   
          method: 'get',
          url: '../data/news.json',
          success: function (data) {
   
            message = JSON.parse(data).list;
            addMessage(message);
          }
        })
        break;
      case 2:
        $ajax({
   
          method: 'get',
          url: '../data/notice.json',
          success: function (data) {
   
            message = JSON.parse(data).list;
            addMessage(message);
          }
        })
        break;
      case 3:
        $ajax({
   
          method: 'get',
          url: '../data/activity.json',
          success: function (data) {
   
            message = JSON.parse(data).list;
            addMessage(message);
          }
        })
        break;
    }
  }

项目整体布局


案例完整代码：
github地址