# 讓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