YDUI Touch Docs 返回首页

Structure

1、说明

1.1、使用YDUI有两种HTML结构可选；

2、调用

方式一（左图）
NavBar
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。

整个结构采用 flex 布局，宽高占满整个屏幕，主体内容 为纵向超出容器出现滚动条。

<section class="g-flexview">

    <header class="m-navbar">
        <a href="#" class="navbar-item"><i class="back-ico"></i></a>
        <div class="navbar-center"><span class="navbar-title">NavBar</span></div>
    </header>

    <div class="g-scrollview">
        <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
        <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
        <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
    </div>

    <footer class="m-tabbar">
        <a href="#" class="tabbar-item tabbar-active">
            <span class="tabbar-icon">
                <i class="icon-home"></i>
            </span>
            <span class="tabbar-txt">首页</span>
        </a>
        <a href="#" class="tabbar-item">
            <span class="tabbar-icon">
                <i class="icon-shopcart-outline"></i>
            </span>
            <span class="tabbar-txt">购物车</span>
        </a>
        <a href="#" class="tabbar-item">
            <span class="tabbar-icon">
                <i class="icon-ucenter-outline"></i>
            </span>
            <span class="tabbar-txt">个人中心</span>
        </a>
    </footer>
</section>
方式二（右图）
Fixed定位
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。
乱七八糟的内容在这里，超出容器，将出现滚动条。

溢出 body 容器出现滚动条，头部和底部导航栏采用fixed定位实现

<body>
    <header class="m-navbar navbar-fixed">
        <a href="#" class="navbar-item"><i class="back-ico"></i></a>
        <div class="navbar-center"><span class="navbar-title">Fixed定位</span></div>
    </header>

    <div class="g-view">
        <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
        <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
        <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
    </div>

    <footer class="m-tabbar tabbar-fixed">
        <a href="#" class="tabbar-item tabbar-active">
            <span class="tabbar-icon">
                <i class="icon-home"></i>
            </span>
            <span class="tabbar-txt">首页</span>
        </a>
        <a href="#" class="tabbar-item">
            <span class="tabbar-icon">
                <i class="icon-shopcart-outline"></i>
            </span>
            <span class="tabbar-txt">购物车</span>
        </a>
        <a href="#" class="tabbar-item">
            <span class="tabbar-icon">
                <i class="icon-ucenter-outline"></i>
            </span>
            <span class="tabbar-txt">个人中心</span>
        </a>
    </footer>
</body>