zhilizhili-ui 2016 web app启动界面制作

摘要：见图确定设计稿大小使用我的中就可以生成一个兼容数值为了加速解析最好把要解析的文本放到页面中如果你想使用在手机端那么就要使用配套的当然不需要自己把提取出来方法已经提取好不需要多虑版本号低于只需要支持一下然后在回调函数里就是正确的布局

content# 指代html content 就是你插入的html内容

首先一个很明显的 我们发现 我们需要一个上下的一个容器 上下不定 上方要填充剩余部分
那么flex是可以用的

这里说下虽然flex新标准在后续的webkit内核浏览器中加上 但是从一开始chrome版本就可以使用webkit-box

分析图 我们可以发现 下方是一个tab-bar 那么我们就应该

    

        

            

                

                    #content#
                
            
        
    

如果你写过ios界面开发 那么你可以发现Tab Bar的Tab Bar item是均分的
很明显可以用flex row解决

为了演示加了高度 实际上最外层容器最好加个高度 这样布局容易些
先定义tab-bar

@mixin interface-tab-bar() {
    .tab-bar {
        @content;
    }
}

@mixin use-tab-bar() {
    $defaults: (
        ".tab-bar": (
        )
    );

    @include interface-tab-bar() {
        @include register-hook(".tab-bar");
        @content;
    }
}

@mixin use-tab-bar--basic() {
    $defaults: (
        ".tab-bar--basic": (
        )
    );

    .tab-bar--basic {
        @include register-hook(".tab-bar--basic");
        @content;
    }
} 

实例化 页面全局样式定义下

@include use-tab-bar();

@include use-tab-bar--basic() {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #00b3ee;
}

解决玩下方tab-bar的定义 我们来解决grid的问题 理论上使用flex-wrap 是不错的解决方案 不过旧版本的flex
模型并没有提供相应东西 怎么办 ok 我们使用一款postcss插件 lost github 链接

首先有个小问题 flex-1并不意味着盒模型真的有那么大 所以最好还是用absolute绕开问题

    

        @for($i = 0; $i < 16; $i++)
            

                

                    

                        <% $i+1 %> 
                    
                
            
        @endfor
    

scss

@lost gutter 0px;

.layout.collection-view.phone-test {
    lost-utility: clearfix;
    > .layout__item {
        width: 23%;
        lost-column: 1/4;
    }
    @include register-hook("#{&}");
}

组件定义为ios端collection-view 每个layout__item为collection-view__cell

我也不知道ios touch icon到底叫什么 索性自己取个名字

    
        
        
    
    
<% $i+1 %>

因为常见的设计没有横过来的 其实多加一层layout不是不可以 不过我是想说不加也可以

picture元素可以针对不同media 更换不同图片 真响应式啊

    

        

            @for($i = 0; $i < 16; $i++)
                

                    

                        

                            

                                
                                    
                                    
                                
                                
<% $i+1 %>
                            
                        
                    
                
            @endfor
        
    
    

        

            

                @for($i = 0; $i < 4; $i++)
                    

                        

                            

                                

                                    
                                        
                                        
                                    
                                    
<% $i+1 %>
                                
                            
                        
                    
                @endfor
            
        
    

把内容放上去

放个演示视频
bilibili地址

首先 flexbox 可以用 就不说了

再其次 calc 都是无法使用复杂表达式的 所以我们需要一个兼容 calc-polyfill github链接

然后为了彻底兼容 我收集编写了一套兼容方案

首先在head加入一些js代码

确定设计稿大小 使用我的zhilizhili-ui 中polyfill-gaoji-set就可以生成一个兼容数值

$desgin-device-width: 375 !global;
$desgin-device-height: 627 !global;
@mixin polyfill() {
    @include use-hook(".layout.collection-view.phone-test .app-launcher-button picture > img") {
        @include polyfill-gaoji-set((
            width: 60 #vw,
            height: 60 #vw
        ));
    }
    @include use-hook(".tab-bar.sys-tab-bar picture > img") {
        @include polyfill-gaoji-set((
            width: 60 #vw,
            height: 60 #vw
        ));
    }
}

@include polyfill();
@include json-encode($polyfill);

为了加速css解析 最好把要解析的文本放到页面中

如果你想使用vw, vh在手机端 那么就要使用配套的vw, vh polyfill 当然 不需要自己把css提取出来 scss方法已经提取好 不需要多虑

import isFunction from "lodash/lang/isFunction";

export default function (pageRenderReady) {
    var vwvhsupportready = new CustomEvent("vwvhsupportready");
    document.addEventListener("vwvhsupportready", function() {
        if (isFunction(pageRenderReady)) {
            pageRenderReady();
        }
    });

// chrome版本号低于28
    if (typeof CSS === "undefined") {
        var content = window.getComputedStyle(
            document.querySelector("head")
        ).fontFamily.replace(//g, "").replace(/"/g, "");

        var viewportwidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
        var viewportheight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

        function rel(propval, unit) {
            return parseFloat(propval.replace(unit, ""));
        }

        function cal(propval) {
            if (typeof propval != "string") {
                return propval;
            }

            if (propval.indexOf("vw") > -1) {
                return viewportwidth * rel(propval, "vw") / 100 + "px";
            } else if (propval.indexOf("vh") > -1) {
                return viewportheight * rel(propval, "vh") / 100 + "px";
            } else {
                return propval;
            }
        }

        function setVwStyle(ele, cssprops) {
            for (var csspropkey in cssprops) {
                if (csspropkey === "transform") {
                    var ret = cssprops[csspropkey];
                    var transValues = ret.match(/[w-]+(?:vw|vh)/g);
                    for (var i = 0; i < transValues.length; i++) {
                        ret = ret.replace(transValues[i], cal(transValues[i]));
                    }
                    ele.style["-webkit-" + csspropkey] = ret;
                    ele.style[csspropkey] = ret;
                } else {
                    ele.style[csspropkey] = cal(cssprops[csspropkey]);
                }
            }
        }

        var parseobj = ( new Function( "return (" + content + ");" ) )();

        for (var key in parseobj) {
            var elements = Array.prototype.slice.call(document.querySelectorAll(key));
            if (elements) {
                for (var i = 0; i < elements.length; i++) {
                    console.dir(elements[i]);
                    setVwStyle(elements[i], parseobj[key]);
                }
            }
        }

        document.dispatchEvent(vwvhsupportready);
    } else {
        document.dispatchEvent(vwvhsupportready);
    }
}

只需要支持一下 然后在回调函数里就是正确的布局

import supportvwvh from "../lib/support_vw_vh";

function main() {
}

supportvwvh(main);