头像

mui上拉和下拉加载更多数据【原创

来源:http://www.sucaihuo.com/php/2520 素材火管理员 2017-07-24 12:39浏览(4418) 收藏

最接近原生APP的html5上拉刷新下拉加载更多数据方法分享

mui中的pullupRefresh会阻止onclick触发事件,mui下拉加载触发a标签链接,mui下拉加载函数pullupRefresh触发click绑定事件,mui+ajax下拉滚动加载分页数据
mui上拉和下拉加载更多数据
分类:PHP > Ajax 难易:中级

程序员,你不是一个人;网站开发QQ群:436471830,在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 45 下载资源 下载积分: 120 积分

mui上拉和下拉加载很简单,官网有DEMO,但是如何触发click事件,这个要多百度一下。

//mui触屏点击
$("#pullrefresh").on('tap', 'li', function(event) {
    var url = $(this).attr("data-url");
    location.href = url;
});

mui分页滚动加载

$pagenum = intval($_POST['pagenum']);
$count = intval($_POST['count']);
$start = ($count - 1) * $pagenum;
$end = $count * $pagenum;
$lists = array();
$j = 0;//从0开始
for ($i = $start; $i < $end; $i++) {
    $lists[$j]['id'] = $i;
    $lists[$j]['title'] = date("Y-m-d H:i:s") . "_" . rand(10000, 99999);
    $lists[$j]['logo'] = "http://sucaihuo.oss-cn-hangzhou.aliyuncs.com/ads/" . ($i+1) . ".jpg";
    $lists[$j]['url'] = "http://www.sucaihuo.com/templates/" . ($i+1) . ".html";
    $j++;
}
echo json_encode($lists);
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:http://www.sucaihuo.com/php/2520.html
评论19
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 18楼
    06-24 20:21
    Sh***ki
    效果挺好的,正是自己一直想找的
  • 头像 17楼
    03-30 09:33
    yu***赫赫
    的确实挺好的,,,简单的样式
  • 头像 16楼
    03-03 02:13
    枫***叶
    效果挺好的,没有注释有点看不懂.
  • 头像 15楼
    01-23 14:43
    li***89
    简单的样式,做的确实挺好的
  • 头像 14楼
    01-18 10:24
    雨***辰
    mui在移动端app中真心不错下拉上拉不错
  • 头像 13楼
    01-18 00:11
    wi***am
    这种下拉刷新放在APP里面可以的
  • 头像 12楼
    12-27 11:38
    yj***15
    效果挺好的,正是自己一直想找的
  • 头像 11楼
    12-21 08:22
    ra***am
    好厉害的样子
  • 头像 10楼
    12-07 14:12
    无***替
    效果挺好的,正是自己一直想找的
  • 头像 9楼
    11-30 10:38
    一***事
    效果挺好的
1 2