你的位置:首页 > 操作系统

[操作系统]MUI开发APP,scroll组件,运用到区域滚动


        最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部。

        头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果如下:


这里面需要注意到的地方就是,头和底是固定的,但是中间的部分呢,由于要设置24小时的内容,从图中可以看到,只显示了03:00~13:00的内容,剩下的内容没显示出来。这里面,我们就需要用到区域滚动了,就是保持头和底不动,中间滚动,所以,我们就要用到MUI的scorll组件,根据MUI官网的介绍,如下:

scroll(区域滚动)

在App开发中,div区域滚动的需求是普遍存在的,但系统默认实现又有如下问题:

  • Android平台4.0以下不支持div滚动
  • Android平台4.0以上支持div滚动,但不显示滚动条
  • 弹出层的div滚动在iOS平台存在事件透传的问题

因此,mui额外提供了区域滚动组件,使用时需要遵循如下DOM结构

<div class="mui-scroll-wrapper"><div class="mui-scroll"><!--这里放置真实显示的DOM内容--></div></div>

区域滚动组件默认为absolute定位,全屏显示;在实际使用过程中,需要手动设置滚动区域的位置(top和height)

若使用区域滚动组件,需手动初始化scroll控件,代码如下:

mui('.mui-scroll-wrapper').scroll({deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006});

来源: http://dev.dcloud.net.cn/mui/ui/#scroll
但是我发现,我在实际使用中,这样代码虽然能用,但是有些地方他还没有讲明白,如果贸然添加这样的一个区块代码,不一定能实现滚动效果,所以,我增加了一些注释,以便各位理解如下:
我贴上代码,代码就是我上面截图的内容,如下:
  
        <header class="mui-bar mui-bar-nav">          <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>          <h1 class="mui-title">区域滚动例子</h1>        </header>        <div class="line mui-bar-nav" style="text-indent: 10px; height: 50px; line-height: 50px; margin-top: 50px;">          <div class="line" style="width:200px; float: left; font-weight: bold; font-size: 18px;"><label id="lbLightName">灯箱名称</label></div>          <div class="line" style="width:120px; float: right; text-align:left;">03月23日 星期三</div>        </div>        <div class="mui-content">          <div id="scroll1" class="mui-scroll-wrapper" style="top: 100px; bottom: 50px;">            <!--MUI默认是position是absolute-->            <div class="mui-scroll">              <img src="img/contrlTypeNext.png" width="100%" />              <ul class="mui-table-view">                <li class="mui-table-view-cell">                  第一个选项卡子项-1                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-2                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-3                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-4                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-5                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-6                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-7                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-8                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-9                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-10                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-11                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-12                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-13                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-14                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-15                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-16                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-17                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-18                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-19                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-20                </li>              </ul>            </div>          </div>        </div>        <div class="line" style="position: absolute;bottom: -10px; z-index: 10;">          <!--需要固定在底部,所以需要用到绝对定位,另外,由于MUI本身的组件的z-index要高于我们自己的div,所以,这里需要自定义z-index,一般10就足够。-->          <div id="btnCtrl" class="mui-btn mui-btn-primary mui-btn-block">            应用设置          </div>        </div>

 


里面有一些注释文字,如果未能理解,可以仔细阅读,最后,我放上全部代码以便各位调试,如下:
<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <title></title>    <script src="js/mui.min.js"></script>    <link href="css/mui.min.css" rel="stylesheet" />    <link rel="stylesheet" type="text/css" href="css/style.css" />    <script type="text/javascript" charset="UTF-8">      mui.init();    </script>  </head>  <body>    <!--侧滑菜单容器-->    <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">      <!--菜单部分-->      <aside id="offCanvasSide" class="mui-off-canvas-right">        <div id="offCanvasSideScroll" class="mui-scroll-wrapper">          <div class="mui-scroll">            <div class="content">              <p style="margin: 10px 15px;">                <button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>              </p>            </div>            <div class="title" style="margin-bottom: 5px;">管控面板</div>            <ul id="menulist" class="mui-table-view mui-table-view-chevron mui-table-view-inverted">              <li class="mui-table-view-cell">                <a class="mui-navigate-right" href="../projectMapMain.html">              地图管理            </a>              </li>              <li class="mui-table-view-cell">                <a class="mui-navigate-right" href="../listManagement.html">                  列表管理                </a>              </li>            </ul>            <div class="title" style="margin-bottom: 5px;">系统申请</div>            <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">              <li class="mui-table-view-cell">                <a class="mui-navigate-right" href="../lightApply.html">                  灯箱申请                </a>              </li>              <li class="mui-table-view-cell">                <a class="mui-navigate-right" href="../lightSearch.html">                  灯箱编辑                </a>              </li>            </ul>            <div class="title" style="margin-bottom: 5px;">数据管理</div>            <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">              <li class="mui-table-view-cell">                <a class="mui-navigate-right">                  KAI报表                </a>              </li>              <li class="mui-table-view-cell">                <a class="mui-navigate-right">                  区域分析                </a>              </li>              <li class="mui-table-view-cell">                <a class="mui-navigate-right">                  趋势报表                </a>              </li>              <li class="mui-table-view-cell">                <a class="mui-navigate-right">                  减排分析                </a>              </li>              <li class="mui-table-view-cell">                <a class="mui-navigate-right">                  光衰分析                </a>              </li>            </ul>            <div class="title" style="margin-bottom: 5px;">系统设置</div>            <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">              <li class="mui-table-view-cell">                <a class="mui-navigate-right" href="../accountManagement.html">                  账号管理                </a>              </li>              <li class="mui-table-view-cell">                <a class="mui-navigate-right">                  用户管理                </a>              </li>              <li class="mui-table-view-cell">                <a class="mui-navigate-right">                  修改密码                </a>              </li>            </ul>          </div>        </div>      </aside>      <div class="mui-inner-wrap">        <header class="mui-bar mui-bar-nav">          <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>          <h1 class="mui-title">区域滚动例子</h1>        </header>        <div class="line mui-bar-nav" style="text-indent: 10px; height: 50px; line-height: 50px; margin-top: 50px;">          <div class="line" style="width:200px; float: left; font-weight: bold; font-size: 18px;"><label id="lbLightName">灯箱名称</label></div>          <div class="line" style="width:120px; float: right; text-align:left;">03月23日 星期三</div>        </div>        <div class="mui-content">          <div id="scroll1" class="mui-scroll-wrapper" style="top: 100px; bottom: 50px;">            <!--MUI默认是position是absolute-->            <div class="mui-scroll">              <img src="img/contrlTypeNext.png" width="100%" />              <ul class="mui-table-view">                <li class="mui-table-view-cell">                  第一个选项卡子项-1                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-2                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-3                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-4                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-5                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-6                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-7                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-8                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-9                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-10                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-11                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-12                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-13                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-14                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-15                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-16                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-17                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-18                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-19                </li>                <li class="mui-table-view-cell">                  第一个选项卡子项-20                </li>              </ul>            </div>          </div>        </div>        <div class="line" style="position: absolute;bottom: -10px; z-index: 10;">          <!--需要固定在底部,所以需要用到绝对定位,另外,由于MUI本身的组件的z-index要高于我们自己的div,所以,这里需要自定义z-index,一般10就足够。-->          <div id="btnCtrl" class="mui-btn mui-btn-primary mui-btn-block">            应用设置          </div>        </div>      </div>    </div>    <script type="text/javascript">      var vText = null; //灯箱名称      var vLng = null; //经度      var vLat = null; //纬度      var vNextPage = null;      mui.init();      //侧滑容器父节点      var offCanvasWrapper = mui('#offCanvasWrapper');      //主界面容器      var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');      //菜单容器      var offCanvasSide = document.getElementById("offCanvasSide");      //关闭侧滑按钮      var offCanvasHide = document.getElementById("offCanvasHide");      //Android暂不支持整体移动动画      if (!mui.os.android) {        var spans = document.querySelectorAll('.android-only');        for (var i = 0, len = spans.length; i < len; i++) {          spans[i].style.display = "none";        }      }      offCanvasHide.addEventListener('tap', function() {        offCanvasWrapper.offCanvas('close');      });      //移动效果是否为整体移动      var moveTogether = false;      //侧滑容器的class列表,增加.mui-slide-in即可实现菜单移动、主界面不动的效果;      var classList = offCanvasWrapper[0].classList;      //变换侧滑动画移动效果;      mui('.mui-input-group').on('change', 'input', function() {        if (this.checked) {          offCanvasSide.classList.remove('mui-transitioning');          offCanvasSide.setAttribute('style', '');          classList.remove('mui-slide-in');          classList.remove('mui-scalable');          switch (this.value) {            case 'main-move':              if (moveTogether) {                //仅主内容滑动时,侧滑菜单在off-canvas-wrap内,和主界面并列                offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);                moveTogether = false;              }              break;            case 'main-move-scalable':              if (moveTogether) {                //仅主内容滑动时,侧滑菜单在off-canvas-wrap内,和主界面并列                offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);              }              classList.add('mui-scalable');              break;            case 'menu-move':              classList.add('mui-slide-in');              break;            case 'all-move':              moveTogether = true;              //整体滑动时,侧滑菜单在inner-wrap内              offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);              break;          }          offCanvasWrapper.offCanvas().refresh();        }      });      //主界面和侧滑菜单界面均支持区域滚动;      mui('#offCanvasSideScroll').scroll();      mui('#offCanvasContentScroll').scroll();      //实现ios平台的侧滑关闭页面;      if (mui.os.plus && mui.os.ios) {        offCanvasWrapper[0].addEventListener('shown', function(e) { //菜单显示完成事件          plus.webview.currentWebview().setStyle({            'popGesture': 'none'          });        });        offCanvasWrapper[0].addEventListener('hidden', function(e) { //菜单关闭完成事件          plus.webview.currentWebview().setStyle({            'popGesture': 'close'          });        });      }      (function($) {        $('#scroll').scroll({          indicators: true //是否显示滚动条        });        mui('.mui-scroll-wrapper').scroll({          deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006        });      })(mui);      //菜单列表点击事件      mui('.mui-table-view-inverted').on('tap', 'a', function() {        var id = this.getAttribute('href');        var href = this.href;        if (href == null || href == '') {          //          plus.nativeUI.toast('正在开发中...');          return;        }        //Android暂不支持整体移动动画        if (!mui.os.android) {          var spans = document.querySelectorAll('.android-only');          for (var i = 0, len = spans.length; i < len; i++) {            spans[i].style.display = "none";          }        }        offCanvasWrapper.offCanvas('close');        mui.openWindow({          id: id,          url: this.href,          styles: {            popGesture: 'close'          },          show: {            aniShow: 'pop-in'          },          waiting: {            autoShow: false          }        });      });      //菜单列表点击事件      mui('#segmentedControl').on('tap', 'a', function() {        var vValue = this.getAttribute('href');        var vDt = new Date().Format("yyyy-MM-dd hh:mm:ss.S");        var vLightName = vText;        var vID = vText.substr(vText.length - 1, 1);        var btnArray = ['是', '否'];        mui.confirm('确认设置【' + vLightName + '】为:' + vValue + '% ?', '提示', btnArray, function(e) {          if (e.index == 0) {            vValue = parseInt(vValue);            if (vValue == 25) {              vValue = 255 / 4;            } else if (vValue == 50) {              vValue = 255 / 2;            } else if (vValue == 75) {              vValue = 255 / 4 * 3;            } else if (vValue == 100) {              vValue = 255;            }            vValue = parseInt(vValue);            $.ajax({              type: "get", //具体项目中,我们用的是post方式,这里只是做一个示例              url: vUrl + "NetLableMgr_Login.asmx/SetCmdToDbHTML?jsoncallback=?", //后台生成订单的那个接口              data: {                jsonParam: "{\"AddByUserId\":1,\"Cmd\":\"" + vValue + "\",\"CmdFlag\":1,\"CmdType\":\"SetPwm\",\"ControlUserId\":1,\"DevAddr\":1,\"DevId\":" + vID + ",\"DevLineIndex\":1,\"GatewayId\":1,\"GroupAddr\":0,\"ID\":1,\"ProjectId\":1,\"TypeProjGateDevGroup\":1}",                UUID: '1',                Dt: vDt              },              dataType: "jsonp",              jsonp: "jsoncallback",              timeout: 3000,              async: false,              success: function(data) {                //            var vData = JSON.stringify(data);                //            plus.nativeUI.toast(vData);                if (data.Status) {                  plus.nativeUI.toast('操作成功。');                } else {                  plus.nativeUI.toast('操作失败,请重试。');                }              },              error: function(xhr, type, errorThrown) {                console.log(xhr);                console.log(type);                console.log(errorThrown);              }            });          } else {            //            plus.nativeUI.toast('您已取消');          }        })      });      mui.plusReady(function() {          var wv = plus.webview.currentWebview();          vText = wv.lightName;          vLng = wv.lng;          vLat = wv.lat;          document.getElementById("lbLightName").innerHTML = vText;        })        //添加上一个页面自定义事件监听      window.addEventListener('DIY_DATA', function(event) {        //获得事件参数        //`var id = event.detail.id;        vText = event.detail.lightName;        vLng = event.detail.lng;        vLat = event.detail.lat;        document.getElementById("lbLightName").innerHTML = vText;      });          </script>  </body></html>

 



好了,本次教程到此结束,转载请保留原作者地址以及姓名(本人无偿分享经验,有偿接单制作APP(基于MUI)和中小型管理系统(基于EasyUI),有需要可以联系我。);
 
作者:南宫萧尘  
E-mail:314791147@qq.com
日期:2016-04-03