手机页面上拉加载下拉刷新杂么做?

原创 2017年01月03日 15:26:40

下载地址 https://github.com/ximan/dropload
demo:这里写图片描述

这里写图片描述

这里写图片描述
用dropload.js

<!doctype html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
    <title>加载底部</title>
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <style>
    *{
        margin: 0;
        padding:0;
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        -webkit-text-size-adjust:none;
    }
    html{
        font-size:10px;
    }
    body{
        background-color: #f5f5f5;
        font-size: 1.2em;
    }
    .header{
        height: 44px;
        line-height: 44px;
        border-bottom: 1px solid #ccc;
        background-color: #eee;
    }
    .header h1{
        text-align: center;
        font-size: 2rem;
        font-weight: normal;
    }
    .content{
        max-width: 640px;
        margin: 0 auto;
        background-color: #fff;
    }
    .content .item{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align:center;
        -webkit-box-align:center;
        box-align:center;
        -webkit-align-items:center;
        align-items:center;
        padding:3.125%;
        border-bottom: 1px solid #ddd;
        color: #333;
        text-decoration: none;
    }
    .content .item img{
        display: block;
        width: 40px;
        height: 40px;
        border:1px solid #ddd;
    }
    .content .item h3{
        display: block;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 100%;
        max-height: 40px;
        overflow: hidden;
        line-height: 20px;
        margin: 0 10px;
        font-size: 1.2rem;
    }
    .content .item .date{
        display: block;
        height: 20px;
        line-height: 20px;
        color: #999;
    }
    .opacity{
        -webkit-animation: opacity 0.3s linear;
        animation: opacity 0.3s linear;
    }
    @-webkit-keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
    @keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
    </style>
    <link rel="stylesheet" href="../dist/dropload.css">
</head>
<body>
<div class="header">
    <h1>就当我是新闻页吧</h1>
</div>
<div class="content">
    <div class="lists"></div>
</div>
<!-- jQuery1.7以上 或者 Zepto 二选一,不要同时都引用 -->
<script src="js/zepto.min.js"></script>
<script src="../dist/dropload.min.js"></script>
<script>
$(function(){
    // 页数
    var page = 0;
    // 每页展示5个
    var size = 10;

    // dropload
    $('.content').dropload({
        scrollArea : window,
        loadDownFn : function(me){
            page++;
            // 拼接HTML
            var result = '';
            $.ajax({
                type: 'GET',
                url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
                dataType: 'json',
                success: function(data){
                    var arrLen = data.length;
                    if(arrLen > 0){
                        for(var i=0; i<arrLen; i++){
                            result +=   '<a class="item opacity" href="'+data[i].link+'">'
                                            +'<img src="'+data[i].pic+'" alt="">'
                                            +'<h3>'+data[i].title+'</h3>'
                                            +'<span class="date">'+data[i].date+'</span>'
                                        +'</a>';
                        }
                    // 如果没有数据
                    }else{
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    // 为了测试,延迟1秒加载
                    setTimeout(function(){
                        // 插入数据到页面,放到最后面
                        $('.lists').append(result);
                        // 每次数据插入,必须重置
                        me.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错,也得重置
                    me.resetload();
                }
            });
        }
    });
});
</script>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

移动端html5 自动生成下拉刷新控件

移动APP中很多页面可以下拉实现刷新,在此实现html5版本的下拉刷新控件。         实现思路:                         1.html页面的需要下拉刷新的容器加个类名s...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

移动端实现简单的下拉刷新【web前端】

说明本文完全是个人学习,实现并不做过多的功能封装。实现原理依赖元素的 overflow-y: auto 的属性,实现滚动轴。通过改变 “刷新提醒”的元素的高度,达到下拉的效果。如图:例如,有如下的结构...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

手机端的下拉刷新上拉加载更多功能的实现

第一步,下载dropload插件,dropload插件下载地址 第二步,将下载好的dropload插件中的dropload.css,dropload.min.js文件引入到页面中,注意还要引用Jque...

移动端的下拉刷新

移动端的下拉刷新

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

手机滚屏页面下拉自动加载内容

$(document).ready(function(){ var range = 50; //距下边界长度/单位px var elemt = 500; //插入元素高度/单位px var maxnu...

dataTable参考文档(中文版)

1 //@translator codepiano 2 //@blog codepiano 3 //@email codepiano.li@qq.com 4 //尝试着翻译了一下,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:手机页面上拉加载下拉刷新杂么做?
举报原因:
原因补充:

(最多只允许输入30个字)