hilongjw
hilongjw
  • 发布:2015-02-04 23:35
  • 更新:2019-03-07 18:24
  • 阅读:49909

今天写了一个mui下拉刷新的ajax实现

分类:MUI

通过给后台传递last 和amount两个参数,获取json数组数据。

        <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>
11 关注 分享
DCloud_heavensoft shaten 多串君 xiaohai83 微信应用开发 demoniu LuckyJohn Native_O Trust 碌卡 h***@163.com

要回复文章请先登录注册

奎子

奎子

写的有问题 只能显示第一个下拉之后没有数据显示
2015-08-04 14:04
laden666666

laden666666

我感觉是机器出了问题 感觉他的下拉太不稳定了
2015-04-08 23:14
lucida

lucida

<!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>test</title>

<link href="../css/mui.css" rel="stylesheet"/>

</head>
<body>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron">

</ul>
</div>
</div>
<script src="../js/mui.min.js"></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://www.com/ajaxjson.php",
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

}

//如果去掉以下注释 ,则提示 Cannot read property 'classList' of undefined at js/mui.min.js:6
/*
if (mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
}, 1000);

});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
*/
</script>

</body>
</html>




ajaxjson.php
<?php
$data=array('last'=>23,'amount'=>324);
echo json_encode($data);
?>


以上代码 下拉时,没任何反应.是哪里出问题了呢?
2015-04-04 08:37
lucida

lucida

有错误
2015-04-04 08:35