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});
但是我发现，我在实际使用中，这样代码虽然能用，但是有些地方他还没有讲明白，如果贸然添加这样的一个区块代码，不一定能实现滚动效果，所以，我增加了一些注释，以便各位理解如下：
我贴上代码，代码就是我上面截图的内容，如下：
<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
MUI开发APP，scroll组件，运用到区域滚动的更多相关文章
- 利用 MUI开发app， 如何实现侧滑菜单及其主体部分上下滑动
利用mui开发APP 之侧滑菜单主内容滚动问题 MUI作为开发者常用的框架之一,其号称最接近原生APP体验的高性能前端框架.因此利用mui开发移动APP,可以为开发者提供很大的便利和接近原生的体验. ...
- mui开发app之cropper裁剪后上传头像的实现
在大多数app项目中,都需要对用户头像的上传,之前做web开发的时候,我主要是通过input type=file的标签实现的,上传后,使用php对图片进行裁剪,这种方式比较传统简单. 此次app开发中 ...
- mui开发app之js将base64转图片文件
之前我已经做过一个利用cropper裁剪并且制作头像的功能.如何在mui app中实现相册或相机获取图片后裁剪做头像请看另一篇博客:mui开发app之cropper裁剪后上传头像的实现 但是当时裁剪后 ...
- mui开发app前言（一）
dcloud mui开发app前言 大一那会就听说html5快要发布了,前景无量,厉害到能写操作系统==|||(什么???蛤?) 似乎html5标准还没正式发布那会,使用hybrid模式开发app已经 ...
- mui开发app之webview是什么
WebView(网络视图)能加载显示网页,可以将其视为一个浏览器,webview被封装在html5+,plus对象中,底层由java,OC实现. 先来谈谈我对webview的理解: 使用mui开发的a ...
- mui开发app之联网应用传输数据
手机的app分为,在线和单机,在线就是类似于C/S模式,能与服务器与他人共享数据的程序,单机就是在没有网络下可以玩转的app. 目前互联网盛行的时代,99%的程序都是联网环境下工作的.那么如何开发本地 ...
- mui开发app之html5+,5+Runtime,5+sdk,native.js
说说几个名词 html5:目前最新的html规范,w3c联盟制定,手机端主要由webkit实现规范,对用户来说就是浏览器实现了它 html5+:所谓"+",扩充了html5原本没有 ...
- mui开发app之自定义事件以更新其他页内容
我之前做过jquery mobile的开发,那还是前年的事情 在jquery mobile中,由于页面是存储在div[data-role=page]的dom中(jqmobile通过对data-role ...
- mui开发app之多图压缩与上传（仿qq空间说说发表）
欲实现效果图 提出需求点: 用户可自由添加删除替换多张图片,并且显示相应缩略图,限制为8张 用户可选择压缩图或直接上传原图功能 返回提醒用户会丢失填写的信息 下面一个个实现上述需求,从简单到复杂: 需 ...
随机推荐
- C# 注册 Windows 热键
闲扯: 前几日,一个朋友问我如何实现按 F1 键实现粘贴(Ctrl+V)功能,百度了一个方法,发给他,他看不懂(已经是 Boss 的曾经的码农),我就做了个Demo给他参考.今日得空,将 Demo 整 ...
- 隐私泄露杀手锏 —— Flash 权限反射
[简版:http://weibo.com/p/1001603881940380956046] 前言 一直以为该风险早已被重视,但最近无意中发现,仍有不少网站存在该缺陷,其中不乏一些常用的邮箱.社交网站 ...
- 在离线环境中发布.NET Core至Windows Server 2008
在离线环境中发布.NET Core至Windows Server 2008 0x00 写在开始 之前一篇博客中写了在离线环境中使用.NET Core,之后一边学习一边写了一些页面作为测试,现在打算发布 ...
- iOS二维码生成、识别、扫描等
二维码扫描 前言: 最近的项目中使用到了二维码,二维码这个模块功能也完成:觉得还是有必要总结一下用来做记录.好长时间没有写二维码了都忘记在差不多了,重新拾起来还是挻快的. 二维码使用场景: 生活中有很 ...
- 利用bootstrap的carousel.js实现轮播图动画
前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...
- MVC Core 网站开发（Ninesky） 2.1、栏目的前台显示
上次创建了栏目模型,这次主要做栏目的前台显示.涉及到数据存储层.业务逻辑层和Web层.用到了迁移,更新数据库和注入的一些内容. 一.添加数据存储层 1.添加Ninesky.DataLibrary(与上 ...
- 前端学Markdown
前面的话 我个人理解,Markdown就是一个富文本编辑器语言,类似于sass对于css的功能,Markdown也可以叫做HTML预处理器,只不过它是一门轻量级的标记语言,可以更简单的实现HTML ...
- 一起学 Java（二）面向对象
一.方法函数 函数也称为方法,就是定义在类中的具有特定功能的一段独立代码.用于定义功能,提高代码的复用性. 函数的特点1> 定义函数可以将功能代码进行封装,便于对该功能进行复用:2> 函数 ...
- 【C#公共帮助类】 ToolsHelper帮助类
这个帮助类,目前我们只用到了两个,我就先更新这两个,后面有用到的,我会继续更新这个Helper帮助类 在Tools.cs中 有很多方法 跟Utils里是重复的,而且Utils里的方法更加新一点,大家可 ...
- BI分析受阻？FineBI推出SPA螺旋式分析新功能！
过去,企业级的数据分析通常会有这么几种场景,业务部门托信息部门分析数据,结果报表一出,唇枪舌剑争论你我高低,数据不准,指标不对.信息部门欠缺业务概念,业务部门不懂技术逻辑,数据分析之路,暂时搁浅. 后 ...