js+css佈局和使用

1 美團外賣app部分佈局講解：

2.使用js實現：將數據獲取之後渲染到dom上

比如針對：

首先數據是從外部獲取，所以要獲取數據之後，在js中使用for循環來生成dom樹的字符串，然後追加到完整的dom樹上。

(function () {
  //字符串模板  
  var temStr = '<div class="category-item">' +
    ' <div class="category-image"><img src="$imgSrc"></img></div>' +
    '<div class="category-text">$text</div>' +
    '</div>'
  //獲取數據，並替換模板,這個文件最後要放到index.htm中，所以這裏json的相對路徑是相對於index.htm
  $.get("../json/head.json", function (backData) {
    var items, result='';
    if (backData.code === 0) {
      items = backData.data.primary_filter.slice(0,8);
      items.forEach((item, index) => {
        //替換temStr中的變量
        let str=temStr.replace('$imgSrc', item.url)
          .replace('$text', item.name)
        result += str;
      })
    }
    //追加到htm中
    $(".category").append(result)
  })
})()

css部分如下：

.category {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  margin-top: 0.5rem;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 24%;
  margin-bottom: 0.4rem;
}
.category .category-image{
  width: 0.9rem;
  height: 1.2rem;
}
.category .category-text{
  font-size: 0.3rem;
  color: #666;

}

3.底部的三個鏈接，可以實現跳轉，同時跳轉之後底圖圖標顏色會發生相應變化。

跳到那個那個網頁，對應的圖標就變高亮，實際上是替換了圖標

(function(){
    var itemTmpl = '<a class="$key btn-item" href="../$key/$key.htm">'+
                      '<div class="tab-icon"></div>'+
                      '<div class="btn-name">$text</div>'+
                   '</a>'
    function init(){
        var items = [{
            key: 'index',
            text: '首頁'
        },{
            key: 'order',
            text: '訂單'
        },{
            key: 'my',
            text: '我的'
        }];
        var str = '';
        items.forEach(function(item){
            str += itemTmpl.replace(/\$key/g,item.key)
                            .replace('$text',item.text)
        });
        $('.bottom-bar').append($(str));
        // 找到當前頁面的url來確定key值
        var arr = window.location.pathname.split('/');
        var page = arr[arr.length-1].replace('.htm','');
        // 將當前的頁面對應的key值的a元素設置active的class
        $('a.'+page).addClass('active');
    }
    init();
})();

css部分代碼如下：

.bottom-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 1.333333rem;
    display: flex;
    border-top: 1px solid #b6b6b6;

    background-color: rgba(246,246,246,0.95);
}

.bottom-bar .btn-item {
    flex: 1;
    display: flex;
    font-size: 0.293333rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
}
.bottom-bar .tab-icon {
    margin-bottom: 0.106667rem;
    width: 0.666667rem;
    height: 0.666667rem;
    background-size: cover;
}

.bottom-bar .index.btn-item .tab-icon {
    background-image: url('./img/homeIcon.png');
}
.bottom-bar .my.btn-item .tab-icon {
    background-image: url('./img/myIcon.png');
}
.bottom-bar .order.btn-item .tab-icon {
    background-image: url('./img/orderIcon.png');
}
.bottom-bar .btn-item.active {
    color: #000;
}
.bottom-bar .index.btn-item.active .tab-icon {
    background-image: url('./img/homeIconActive.png');
}
.bottom-bar .my.btn-item.active .tab-icon {
    background-image: url('./img/myIconActive.png');
}
.bottom-bar .order.btn-item.active .tab-icon {
    background-image: url('./img/orderIconActive.png');
}