让weui和iscroll结婚

    结合我们之前讲的移动端特点

    • header
    • content（#wrapper）
    • footer

    也就是说我们可以这样做

    2.     <div class="page">
    3.         <div class="hd header">
    4.             <h1 class="page_title">WeUI</h1>
    5.         </div>
    6.         <div class="bd" id="wrapper">
    8.         </div>
    10.         <div class="hd footer">
    11.             <h1 class="page_title">WeUI</h1>
    12.         </div>
    13.     </div>
    14. </div>

    我们先把helloiscroll里的内容放进去

    WeUI

    去掉 class=”page_title”

    不能滑动，添加js就好了

    修改iscroll2.css

    1.     position: absolute;
    2.     z-index: 2;
    4.     left: 0;
    5.     width: 100%;
    6.     height: 45px;
    7.     line-height: 45px;
    8.     background: #CD235C;
    9.     padding: 0;
    10.     color: #eee;
    11.     font-size: 20px;
    12.     text-align: center;
    13.     font-weight: bold;
    14. }
    15. #wrapper {
    16.     position: absolute;
    17.     z-index: 1;
    18.     top: 48px;/*m*/
    19.     bottom: 0px; /*m*/
    20.     width: 100%;
    21.     background: #ccc;
    22.     overflow: hidden;
    23. }

    下面开始集成点击进入按钮页面

    看一下按钮是如何定义和响应的

    1. <a class="weui_cell js_cell" href="javascript:;" data-id="button">
    2.     <span class="weui_cell_hd">
    3.       <img src="/images/icon_nav_button.png" class="icon_nav" alt=""></span>
    4.     <div class="weui_cell_bd weui_cell_primary">
    5.         <p>Button</p>
    6.     </div>
    7.     <div class="weui_cell_ft">
    8.     </div>
    9. </a>

    放到第一个li里

    此时不能点击，nnd，这是怎么回事儿呢？

    各位想想之前讲iscroll的时候，是不是有点注意事项啊？

    翻查一下代码，确实没加click（其实是为了演示故意的）

    加上，再次预览

    让WeUI和iScroll结婚 - 图2

    很明显是z-index问题，翻查iscroll2.css里发现#wrapper是z-index:1

    而.page没有设置,简单改一下即可

    1. <style>
    2.   .page{
    3.     z-index: 2;
    5. </style>

    是时候去加上weui其他效果了

    • li上增加按钮