mui真机运行上拉加载动态数据时,滚动条无法滚动,web调试可以滚动,去掉上拉加载也是可以滚动的,求大神指教
1***@qq.com
- 发布：2020-02-13 16:22
- 更新：2020-09-02 15:25
- 阅读：1221
1***@qq.com (作者) - 程序员
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="ROOT/css/mui.min.css" rel="stylesheet" />
<style>
/.mui-plus-pullrefresh .mui-scroll {/
/position: absolute;/
/width: 100%;/
/}/
/.mui-scroll-wrapper{/
/position: absolute;/
/width: 100%;/
/}/
/.mui-scroll{/
/over-flow:scroll/
/}/
</style>
</head>
<body>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="touch-actin:none">
<div class="mui-scroll" style="position:absolute">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">1</li>
</ul>
</div>
</div>
<script src="ROOT/js/mui.min.js"></script>
<script src="ROOT/js/jquery-2.1.4.js"></script>
<script>
//mui.init();
//由于数据是动态获取的,因此在MUI初始化时必须将其放置到所有数据全部加载完成之后,即文档就绪事件.如果直接使用,则无法出现滚动的效果.
// mui.plusReady(function(){
//
// });
mui.init({
swipeBack: false, //关闭左滑关闭功能
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
/**
- 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1500);
}
var count = 0;
/** -
上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 20; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
table.appendChild(li);
}
}, 1500);
}
console.log(mui.os.plus);
if (mui.os.plus) {mui.plusReady(function() {
// mui('.mui-scroll-wrapper').scroll({
// scrollY: true, //是否竖向滚动
// scrollX: false, //是否横向滚动
// startX: 0, //初始化时滚动至x
// startY: 0, //初始化时滚动至y
// indicators: false, //是否显示滚动条
// deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏
// bounce: true //是否启用回弹
// });
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
}, 1000);});
} else {
mui.ready(function() {
// mui('.mui-scroll-wrapper').scroll({
// scrollY: true, //是否竖向滚动
// scrollX: false, //是否横向滚动
// startX: 0, //初始化时滚动至x
// startY: 0, //初始化时滚动至y
// indicators: false, //是否显示滚动条
// deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏
// bounce: true //是否启用回弹
// });
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
</script>
</body>
</html>
1***@qq.com (作者)
就是官方的demo
2020-02-13 17:37