本人这两天才开始接触mui，对于其套路还处于懵逼状态，在此问问各位大神，我仿照官网的例子做了个下拉刷新，上拉下载，在经历了一堆弯弯绕绕之后，下拉刷新有了效果，成功了，可是上拉加载一点反应都没有，我只是想看到效果，也在网上搜了下，表示都没搞定！！在此粘贴代码截图，以及代码。求指正。
<!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.js"></script>
<link href="//ask.dcloud.net.cn/css/mui.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<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>
<footer class="mui-bar mui-bar-footer">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">标题</h1>
</footer>
<div class="mui-content mui-scroll-wrapper" id="refreshContainer">
<div class="mui-scroll">
<div class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!--支持循环，需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/4.png" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="img/1.png" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="img/2.png" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="img/3.png" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="img/4.png" /></a></div>
<!--支持循环，需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/1.png" /></a></div>
</div>
</div>
<!--折叠面板-->
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板1</a>
<div class="mui-collapse-content">
<p>面板1子内容</p>
</div>
</li>
</ul>
<!--list 列表-->
<ul class="mui-table-view">
<li class="mui-table-view-cell">Item 1</li>
<li class="mui-table-view-cell">Item 2</li>
<li class="mui-table-view-cell">Item 3</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">Item 1
<span class="mui-badge mui-badge-primary">11</span>
</li>
<li class="mui-table-view-cell">Item 2
<span class="mui-badge mui-badge-success">22</span>
</li>
<li class="mui-table-view-cell">Item 3
<span class="mui-badge">33</span>
</li>
</ul>
<div class="mui-numbox" data-numbox-min="1" data-numbox-max="5">
<!-- "-"按钮，点击可减小当前数值 -->
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
<input class="mui-numbox-input" type="number"/>
<!-- " "按钮，点击可增大当前数值 -->
<button class="mui-btn mui-numbox-btn-plus" type="button"> </button>
</div>
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="img/1.png">
<div class="mui-media-body">
幸福
<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="img/2.png">
<div class="mui-media-body">
木屋
<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="img/3.png">
<div class="mui-media-body">
CBD
<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="img/3.png">
<div class="mui-media-body">
CBD
<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="img/3.png">
<div class="mui-media-body">
CBD
<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="mui-content">
<!--//操作表-->
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
<!-- 可选择菜单 -->
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#">菜单1</a>
</li>
<li class="mui-table-view-cell">
<a href="#">菜单2</a>
</li>
</ul>
<!-- 取消菜单 -->
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#sheet1"><b>取消</b></a>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
mui('#sheet1').popover('toggle');
var gallery = mui('.mui-slider');
gallery.slider({
interval:2000//自动轮播周期，若为0则不自动播放，默认为0；
});
mui.init({
pullRefresh: {
container:'#refreshContainer',
down : {
style:'circle',//必选，下拉刷新样式，目前支持原生5 ‘circle’ 样式
color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
height:'50px',//可选,默认50px.下拉刷新控件的高度,
range:'100px', //可选 默认100px,控件可下拉拖拽的范围
offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
auto: true,//可选,默认false.首次加载自动上拉刷新一次
callback :function(){} //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
}
}
});
mui.init({
pullRefresh : {
container:'#refreshContainer',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
up:{
height:50,//可选.默认50.触发上拉加载拖动距离
auto:true,//可选,默认false.自动上拉加载一次
contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
callback:function(){
console.log("aaaa");
}
}
}
});
</script> </body>
</html>
2 个回复
debugger (作者) - 前端菜鸟
已解决
4***@qq.com - sunhh
能不能发一下你的demo ，今天刚接触，做什么都找不到头绪，qq: 450225244.谢谢
1***@qq.com
你在项目目录下选择新建网页选择下拉刷新上拉加载模板直接就有，他连页面都给你新建好了。你只需要修改一下回调函数就行了
2017-09-22 15:12
debugger (作者)
好多问题和坑，收拾不了
2017-09-27 14:27