让weui和iscroll结婚

以weui2为蓝本

观察一下它的dom

    <div class="container js_container">
        <div class="page">
            <div class="hd">
                <h1 class="page_title">WeUI</h1>
                <p class="page_desc">为微信Web服务量身设计</p>
            </div>
            <div class="bd">

            </div>
        </div>
    </div>

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

• header
• content（#wrapper）
• footer

也就是说我们可以这样做

<div class="container js_container">
    <div class="page">
        <div class="hd header">
            <h1 class="page_title">WeUI</h1>
        </div>
        <div class="bd" id="wrapper">

        </div>

        <div class="hd footer">
            <h1 class="page_title">WeUI</h1>
        </div>
    </div>
</div>

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

WeUI

去掉 class="page_title"

不能滑动，添加js就好了

  <script type="text/javascript">
    $(function(){
      // alert('dom ready');
      loaded () ;
    });

    var myScroll;

    function loaded () {
        myScroll = new IScroll('#wrapper', { mouseWheel: true });
    }

    document.addEventListener('touchmove', function (e) { 
      e.preventDefault(); 
    }, false);

  </script>

修改iscroll2.css

#header {/*add*/
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    background: #CD235C;
    padding: 0;
    color: #eee;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}
#wrapper {
    position: absolute;
    z-index: 1;
    top: 48px;/*m*/
    bottom: 0px; /*m*/
    left: 0;
    width: 100%;
    background: #ccc;
    overflow: hidden;
}

同时放到cell的高度

#scroller li {
    padding: 0 10px;
    height: 100px; /*m from 44 to 100*/
    line-height: 40px;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #fff;
    background-color: #fafafa;
    font-size: 14px;
}

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

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

<a class="weui_cell js_cell" href="javascript:;" data-id="button">
    <span class="weui_cell_hd">
      <img src="/images/icon_nav_button.png" class="icon_nav" alt=""></span>
    <div class="weui_cell_bd weui_cell_primary">
        <p>Button</p>
    </div>
    <div class="weui_cell_ft">
    </div>
</a>

放到第一个li里

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

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

比如你在#wrapper内部放a标签或button的click事件是绑定补上的。需要配置

myScroll = new IScroll('#wrapper', { 
  mouseWheel: true,
  click: true
});

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

加上，再次预览

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

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

<style>
  .page{
    z-index: 2;
  }
</style>

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

• li上增加按钮
• 把对应模板引入

helloworld-weui2+iscroll2.html