
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron">
<li onclick="alert(1111)">bbb</li>
<li onclick="alert(1111)">bbb</li>
<li onclick="alert(1111)">bbb</li>
<li onclick="alert(1111)">bbb</li>
</ul>
</div>
</div>
<script type="text/javascript">
mui.init({
gestureConfig: {
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false
swipe: true, //默认为true
drag: true, //默认为true
hold: false, //默认为false,不监听
release: false //默认为false,不监听
},
pullRefresh: {
container: "#refreshContainer", //下拉刷新容器标识,querySelector能定位的css选择首春器均可,比如禅茄:者袭耐id、.class等
down: {
contentdown: "下拉可以刷新", //可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
contentover: "释放立即刷新", //可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
contentrefresh: "正在刷新...", //可选,正在刷新状态时,下拉刷新控件上显示的标题内容
callback: function() { //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
}
})
</script>
<script>mui.init({
swipeBack:
false,
pullRefresh:
{
container:
'#pullrefresh',
down:
{
callback:
pulldownRefresh
}
}
})
/**
* 下拉刷新具体业务实现 */
var
last=-5,amount=5
function
pulldownRefresh()
{
last =last+amount
var
table =
document.body.querySelector('.mui-table-view')
var
cells =
document.body.querySelectorAll('.mui-table-view-cell')
mui.ajax({
type:
"猜埋post",
dataType:
"json",
url:
"http://localhost/amazeui/data.php?action=item",
data:
"last="+last+"&amount="+amount,
complete :function(){$("#load").hide()},
success:
function(msg){
var
data =
msg
var
tmp=''隐兆喊
$.each(data,
function(i,
n){
var
li =
document.createElement('li')
li.className
=
'mui-table-view-cell'
li.innerHTML
=
'<a class="mui-navigate-right">'
+
n.itemname
+
'</a>'
//下拉刷新,新纪录插到最灶野前面;
table.insertBefore(li,
table.firstChild)
})
}
})
mui('#pullrefresh').pullRefresh().endPulldownToRefresh()
//refresh completed
}
if
(mui.os.plus)
{
mui.plusReady(function()
{
setTimeout(function()
{
mui('#pullrefresh').pullRefresh().pullupLoading()
},
1000)
})
}
else
{
mui.ready(function()
{
mui('#pullrefresh').pullRefresh().pullupLoading()
})
}
</script>
mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在mui.init方法中配置的功能洞者包括:创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载。但是官方有又说法:页面初始化纳差薯:必须执行mui.init方法mui在页面初始化时,初始化了很多参数配置,比如:按键监听、手势监听等,因此mui页面都必须调用一次mui.init()方法;在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady()方法,涉及到HTML5+的api,建议都写在mui.plusReady方法中。个人认为:1.每个用到mui的页面都调用下mui.init。庆闭2.如果需要使用大H5+对象,就写到plusReady中,如plus对象。欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)