让weui和iscroll结婚

以weui2为蓝本

观察一下它的dom

  1.     <div class="container js_container">
  2.         <div class="page">
  3.             <div class="hd">
  4.                 <h1 class="page_title">WeUI</h1>
  5.                 <p class="page_desc">为微信Web服务量身设计</p>
  6.             </div>
  7.             <div class="bd">
  9.             </div>
  10.         </div>
  11.     </div>

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

  • header
  • content（#wrapper）
  • footer

也就是说我们可以这样做

  1. <div class="container js_container">
  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就好了

  1.   <script type="text/javascript">
  2.     $(function(){
  3.       // alert('dom ready');
  4.       loaded () ;
  5.     });
  7.     var myScroll;
  9.     function loaded () {
  10.         myScroll = new IScroll('#wrapper', { mouseWheel: true });
  11.     }
  13.     document.addEventListener('touchmove', function (e) { 
  14.       e.preventDefault(); 
  15.     }, false);
  17.   </script>

修改iscroll2.css

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

同时放到cell的高度

  1. #scroller li {
  2.     padding: 0 10px;
  3.     height: 100px; /*m from 44 to 100*/
  4.     line-height: 40px;
  5.     border-bottom: 1px solid #ccc;
  6.     border-top: 1px solid #fff;
  7.     background-color: #fafafa;
  8.     font-size: 14px;
  9. }

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

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

  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里

让WeUI和iScroll结婚 - 图1

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

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

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

  1. myScroll = new IScroll('#wrapper', { 
  2.   mouseWheel: true,
  3.   click: true
  4. });

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

加上，再次预览

让WeUI和iScroll结婚 - 图2

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

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

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

让WeUI和iScroll结婚 - 图3

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

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

helloworld-weui2+iscroll2.html