zhilizhili-ui 2016 web app啓動界面製做

時間 2019-12-09

原文原文鏈接

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

效果圖

首先一個很明顯的咱們發現咱們須要一個上下的一個容器上下不定上方要填充剩餘部分
那麼flex是能夠用的php

這裏說下雖然flex新標準在後續的webkit內核瀏覽器中加上可是從一開始chrome版本就可使用webkit-boxcss

<div class="layout flex full-height vertical">
    <div class="layout__item flex-1">
    </div>
    <div class="layout__item">
    </div>
</div>

分析圖咱們能夠發現下方是一個tab-bar 那麼咱們就應該html

<div class="tab-bar tab-bar--basic sys-tab-bar">
    <div class="layout flex horizontal">
        <div class="layout__item flex-1 tab-bar__item">
            <div class="layout flex full-height vertical horizontal-center vertical-center">
                <div class="layout__item">
                    #content#
                </div>
            </div>
        </div>
    </div>
</div>

若是你寫過ios界面開發那麼你能夠發現Tab Bar的Tab Bar item是均分的
很明顯能夠用flex row解決ios

爲了演示加了高度實際上最外層容器最好加個高度這樣佈局容易些
先定義tab-bargit

@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;
    }
}

實例化頁面全局樣式定義下github

@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 連接web

首先有個小問題 flex-1並不意味着盒模型真的有那麼大因此最好仍是用absolute繞開問題chrome

<div class="layout__item flex-1 utility-pos-relative">
    <div class="layout full-parent utility-pos-absolute collection-view phone-test" style="background-color: #93C47D">
        @for($i = 0; $i < 16; $i++)
            <div class="layout__item collection-view__cell">
                <div class="layout flex full-height vertical horizontal-center vertical-center">
                    <div class="layout__item">
                        <% $i+1 %> 
                    </div>
                </div>
            </div>
        @endfor
    </div>
</div>

scssjson

@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到底叫什麼索性本身取個名字

<div class="button icon-button app-launcher-button">
    <picture class="icon-button__picture">
        <source srcset="/assets/static/img/mm.jpeg" media="(min-width: 600px)">
        <img src="/assets/static/img/tubiao.png" alt="MDN">
    </picture>
    <div class="text-align-center icon-button__content"><% $i+1 %></div>
</div>

由於常見的設計沒有橫過來的其實多加一層layout不是不能夠不過我是想說不加也能夠

picture元素能夠針對不一樣media 更換不一樣圖片真響應式啊

<div class="layout flex full-height vertical">
    <div class="layout__item flex-1 utility-pos-relative">
        <div class="layout full-parent utility-pos-absolute collection-view phone-test" style="background-color: #93C47D">
            @for($i = 0; $i < 16; $i++)
                <div class="layout__item collection-view__cell">
                    <div class="layout flex full-height vertical horizontal-center vertical-center">
                        <div class="layout__item">
                            <div class="button icon-button app-launcher-button">
                                <picture class="icon-button__picture">
                                    <source srcset="/assets/static/img/mm.jpeg" media="(min-width: 600px)">
                                    <img src="/assets/static/img/tubiao.png" alt="MDN">
                                </picture>
                                <div class="text-align-center icon-button__content"><% $i+1 %></div>
                            </div>
                        </div>
                    </div>
                </div>
            @endfor
        </div>
    </div>
    <div class="layout__item">
        <div class="tab-bar tab-bar--basic sys-tab-bar">
            <div class="layout flex horizontal">
                @for($i = 0; $i < 4; $i++)
                    <div class="layout__item flex-1 tab-bar__item">
                        <div class="layout flex full-height vertical horizontal-center vertical-center">
                            <div class="layout__item">
                                <div class="button icon-button app-launcher-button">
                                    <picture class="icon-button__picture">
                                        <source srcset="/assets/static/img/mm.jpeg" media="(min-width: 600px)">
                                        <img src="/assets/static/img/tubiao.png" alt="MDN">
                                    </picture>
                                    <div class="text-align-center icon-button__content"><% $i+1 %></div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endfor
            </div>
        </div>
    </div>
</div>

把內容放上去

放個演示視頻
bilibili地址

請選擇php分支項目連接

微信 uc瀏覽器兼容的問題

首先 flexbox 能夠用就不說了

再其次 calc 都是沒法使用複雜表達式的因此咱們須要一個兼容 calc-polyfill github連接

而後爲了完全兼容我收集編寫了一套兼容方案

首先在head加入一些js代碼

<script>
    if (typeof CSS === "undefined") {
        document.querySelector("html").classList.add("not-support-highlevelcss");
    } else {
        document.querySelector("html").classList.add("support-highlevelcss");
    }
    // https://github.com/jieyou/rem_layout
    !function(a,b,c){function q(){var d=Math.min((o?e[h]().width:f.innerWidth)/(a/b),c);d!=p&&(k.innerHTML="html{font-size:"+d+"px!important;"+n+"}",p=d)}function r(){clearTimeout(l),l=setTimeout(q,500)}var l,d=document,e=d.documentElement,f=window,g="addEventListener",h="getBoundingClientRect",i="pageshow",j=d.head||d.getElementsByTagName("HEAD")[0],k=d.createElement("STYLE"),m="text-size-adjust:100%;",n="-webkit-"+m+"-moz-"+m+"-ms-"+m+"-o-"+m+m,o=h in e,p=null;a=a||320,b=b||16,c=c||32,j.appendChild(k),d[g]("DOMContentLoaded",q,!1),"on"+i in f?f[g](i,function(a){a.persisted&&r()},!1):f[g]("load",r,!1),f[g]("resize",r,!1),q()}(
            320, // 設置設計稿基準寬度
            16, // 設置開發時的被除數（見HOW TO USE第4步） 在設計稿基準寬度爲320時最好設置爲16（在在設計稿基準寬度爲其餘值時等比放大，如640時設置爲32等）。由於瀏覽器默認的值就是16，這樣代碼失效或還沒有起效時，不會有佈局問題
            32 // 設置最大根元素font-size，請注意這是一個css像素值，而非物理像素值。它的做用是，當用戶用很是寬的屏幕（pad、pc）訪問頁面時，不至於使得根元素的font-size超過這個值，使得佈局很是難看。見圖「show/wide_max_rem.jpg」
    );
</script>

肯定設計稿大小使用個人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解析最好把要解析的文本放到頁面中

<style>
    .layout.collection-view.phone-test > .layout__item {
        width: 23%;
        width: calc(99.99% * 1/4 - (0px - 0px * 1/4)); }
</style>

若是你想使用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);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

zhilizhili-ui 2016 web app啓動界面製做

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

效果圖

請選擇php分支 項目連接

微信 uc瀏覽器兼容的問題

請選擇php分支項目連接