代码如下,是什么原因导致下拉和滚动无法纯在呢?
<!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">
<!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="css/app.css"/>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="mui-content mui-scroll-wrapper">
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="images/yuantiao.jpg">
<p class="mui-slider-title">静静看这世界</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="images/shuijiao.jpg">
<p class="mui-slider-title">幸福就是可以一起睡觉</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="images/muwu.jpg">
<p class="mui-slider-title">想要一间这样的木屋,静静的喝咖啡</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="images/cbd.jpg">
<p class="mui-slider-title">Color of SIP CBD</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="images/yuantiao.jpg">
<p class="mui-slider-title">静静看这世界</p>
</a>
</div>
<!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="images/shuijiao.jpg">
<p class="mui-slider-title">幸福就是可以一起睡觉</p>
</a>
</div>
</div>
<div class="mui-slider-indicator mui-text-right">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<div id="mainpage" class="mui-scroll">
<ul id="list" class="mui-table-view mui-table-view-chevron">
</ul>
</div>
</div>
</body>
<script src="js/mui.min.js"></script>
<script src="js/mui.lazyload.js"></script>
<script src="js/mui.lazyload.img.js"></script>
<script>
mui.init({
swipeBack: true, //启用右滑关闭功能
pullRefresh: {
container: "#mainpage", //待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
down : {
height:50,//可选,默认50.触发下拉刷新拖动距离,
contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容
callback :pullfreshPage //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
});
function pullfreshPage(){
var currentView =plus.webview.currentWebview();
currentView.hide();
currentView.reload();
currentView.show("page-forward",1000);
mui.toast("刷新完成!");
mui('#mainpage').pullRefresh().endPulldownToRefresh();
}
var slider = mui("#slider");
var createFragment = function(count) {
var fragment = document.createDocumentFragment();
var li;
for (var i = 0; i < count; i++) {
li = document.createElement('li');
li.className = 'mui-table-view-cell mui-media';
li.innerHTML = '<a class="mui-navigate-right"><img class="mui-media-object mui-pull-left" data-lazyload="http://www.dcloud.io/hellomui/images/' + (i % 5 + 1) + '.jpg?version=' + Math.random() * 1000 + '"><div class="mui-media-body">主标题<p class="mui-ellipsis">列表二级标题</p></div></a>';
fragment.appendChild(li);
}
return fragment;
};
(function($) {
var list = document.getElementById("list");
list.appendChild(createFragment(50));
$(document).imageLazyload({
placeholder: 'images/60x60.gif'
});
})(mui);
</script>
</html>
Qusean (作者)
原来是因为动态内容需要重新计算滚动区域的问题,解决好了,感谢果汁!!
2016-06-20 18:32