最近在開發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});
但是我發現，我在實際使用中，這樣代碼雖然能用，但是有些地方他還沒有講明白，如果貿然添加這樣的一個區塊代碼，不一定能實現滾動效果，所以，我增加了一些注釋，以便各位理解如下：
我貼上代碼，代碼就是我上面截圖的內容，如下：
<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），有需要可以聯系我。）；
我新建一個QQ群，如果有問題，可以在群里提。如果合適，也會根據大家提的比較多的問題，來寫篇博文，幫助更多的人，群號：275523437
點擊鏈接加入群【.Net,MVC,EasyUI,MUI,Html,JS】：
http://jq.qq.com/?_wv=1027&k=2A0RbLd
（如果有私活，或者一起合作的，也可以私信找我呀，嘿嘿）；
作者：南宮蕭塵
E-mail：314791147@qq.com
日期：2016-04-03