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');
}