MUI-区域滚动
一、HMTL代码
看底部 最简单实现区域滚动
标题部分....
//height: 150px;看效果的，实际可以改成1px
如何使用默认的absolute定位这需要加一个 <div style="margin-top: 45px; "></div>隔离标题栏高度，可以把滚动区域改成relative,则不需要考虑标题栏高度，resizeScrollHeight（）方法中也不需要加减44的差值。
<div id="partScroll" class="mui-content mui-scroll-wrapper " style="height: 150px; background-color: white; "> //不要设置padding: 0px; 会导致滚动条不能滚动到最顶端（在一些较复杂结构中可能还是需要设置）
<div class=" mui-scroll">
<div >//内容使用一个div包裹
//内容
（内容的第一个标签最好设置margin-top：10px，内容的最后一个标签最好设置margin- bottom：10px）
</div >
</div>
<!-- mui-Scroll结束-->
</div>
<!--mui-content mui-scroll-wrapper 结束-->
二、js部分
<script src="../../js/mui.min.js "></script>
<script>
(function($, doc) {
$.plusReady(function() {
closeWating();
initData();
});
}(mui, document));
mui.init();
mui('.mui-scroll-wrapper').scroll(); //启动滚动 必须
</script>
/**
* mui-scroll 默认是全屏的 并且是绝对布局
*所以要根据业务需求在js中动态设置 mui-scroll 高度（最好在页面数据加载完毕后）
*/
function resizeScrollHeight() {
var partHeader = findID('partHeader');
var partHeaderHeight = partHeader.offsetHeight;
console.log('标题高度=' + partHeaderHeight);
var partBottom = findID('partBottom');//底部菜单
var partBottomHeight = partBottom.offsetHeight;
/*var clientHeight = document.body.clientHeight;//部分情况下获得值不正确*/
var clientHeight = window.screen.availHeight;
/* clientHeight = 548;*/
console.log('屏幕高度=' + clientHeight);
//还可以使用offsetTop获取固定位的高度
特别注意：在考虑有底部菜单情况下获取屏幕高度
换个思路 直接获取到底部菜单的offsetTop，用这个值来作为屏幕的高度！！！
offsetTop的用法：如果要取A部分的高度，要取在A之下的B部分的offsetTop。
另外可以有window.onresize=function(){
//来监听安卓系统底部虚拟菜单的显示和隐藏
//定义2个变量，一个变量记录onresize时的offsetTop，另一个值记录resizeScrollHeight()中的offsetTop。
//在onresize中做判断就可以做显示和隐藏 的判断
}
var scrollHeight = clientHeight - partBottomHeight /*- partHeaderHeight*/;
console.log('滚动区域 高度 计算 =' + scroll);
var partScroll = findID('partScroll');
partScroll.style.height =scrollHeight +43+ "px" ;//必须加px
//标题栏的高度是44px，
//所以计算出滚动区域的高度后还要加上43px（理论上需要，可能跟页面整体的定位属性有关，根据实际情况是否需要先设置.mui-scroll-wrapper的style="position:relative"实际看页面的测试效果并调整数值，具体值是加还是减，要根据页面的时间情况设置）
console.log('滚动区域 高度 设置后 =' + partScroll.offsetHeight);
}
.mui-scroll-wrapper滚动区域的定位默认是绝对定位，可以style中直接改成相对定位，方便布局。
/**
* 禁止页面整体滚动 不影响区域滚动
* 在mui.plusReady() 方法中执行
*/
function forbidScroll() {
plus.webview.currentWebview().setStyle({//这是H5+的滚动条
scrollIndicator: 'none'
});
//document.addEventListener('touchstart', function(e) { e.preventDefault(); })//在苹果设备上连点击的效果都没有了。
}
//要综合考虑非滚动区域的冲突问题，还有点击事件、拖动、滑动事件。
关于宽高 http://blog.csdn.net/tammy_zhu/article/details/7406073
《MUI-动态检测底部虚拟按键隐藏显示》
最简单实现区域滚动
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 需要动态设置.mui-popover参数-->
<ul id="idBillingObject" class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#">Item1</a>
</li>
<li class="mui-table-view-cell">
<a href="#">Item2</a>
</li>
<li class="mui-table-view-cell">
<a href="#">Item3</a>
</li>
</ul>
</div>
</div>
mui('.mui-scroll-wrapper').scroll();
mui('.mui-scroll-wrapper').scroll({indicators: false}); //这是scroll控件的滚动条 不显示滚动条
如果是5+环境下的webview的滚动条。
plus.webview.currentWebview().setStyle({scrollIndicator:'none'});
正文到此结束
热门推荐
相关文章
近期评论
-
来自： 运维-docker专题-创建镜像-操作容器-制作jdk17的docker镜像等
-
来自： 留言板
-
来自： 留言板
-
来自： js-处理网页图片宽度自适应屏幕宽度
-
来自： 留言板
