iscroll实现移动端下拉刷新，上拉加载更多

js菜鸡-------自我记录

html页面：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

    <meta name="format-detection" content="telephone=no">

    <meta name="format-detection" content="address=no">

    <title>iscroll-测试</title>

    <link href="css/reset.css" rel="stylesheet" type="text/css">

    <link href="css/cm.css" rel="stylesheet" type="text/css">

</head>

<style>

    span{display:block;width:100%;text-align:center;}

</style>

<body>

<div id="wrapper">

    <div id="scroller">

        <div id="pullDown">

            <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新</span>

        </div>

        <!--信息列表-->

        <ul id="thelist">

            <div class="cm-v2 no-border">

                <section class="doc-box">

                    <ul class="doctorUlList" id="doctorUlListAuto">

                        <!--此处展示具体信息 -->

                    </ul>

                </section>

            </div>

        </ul>

        <div id="pullUp">

            <span class="pullUpIcon"></span><span class="pullUpLabel" >查看更多</span>

        </div>

    </div>

</div>

<div id="footer"></div>

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>

<script type="text/javascript" src="js/iscroll.js"></script>

<script type="text/javascript" src="js/getList-iscroll.js"></script>

<script type="text/javascript">

    var currentPage = 1;

    Ajax(currentPage);

    var myScroll,

            pullDownEl, pullDownOffset,

            pullUpEl, pullUpOffset;

    function loaded() {

        pullDownEl = document.getElementById('pullDown');

        pullDownOffset = pullDownEl.offsetHeight;

        pullUpEl = document.getElementById('pullUp');

        pullUpOffset = pullUpEl.offsetHeight;

        myScroll = new iScroll('wrapper', {

            useTransition: true,

            topOffset: pullDownOffset,

            onRefresh: function () {

                if (pullDownEl.className.match('loading')) {

                    pullDownEl.className = '';

                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'refresh...';

                } else if (pullUpEl.className.match('loading')) {

                    pullUpEl.className = '';

                    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'load more...';

                }

            },

            onScrollMove: function () {

                if (this.y > 5 && !pullDownEl.className.match('flip')) {

                    pullDownEl.className = 'flip';

                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'refresh...';

                    this.minScrollY = 0;

                } else if (this.y < 5 && pullDownEl.className.match('flip')) {

                    pullDownEl.className = '';

                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'refresh...';

                    this.minScrollY = -pullDownOffset;

                } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {

                    pullUpEl.className = 'flip';

                    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'refresh...';

                    this.maxScrollY = this.maxScrollY;

                } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {

                    pullUpEl.className = '';

                    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'load more...';

                    this.maxScrollY = pullUpOffset;

                }

            },

            onScrollEnd: function () {

                if (pullDownEl.className.match('flip')) {

                    pullDownEl.className = 'loading';

                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';

                    pullDownAction();

                } else if (pullUpEl.className.match('flip')) {

                    pullUpEl.className = 'loading';

                    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';

                    pullUpAction();

                }

            }

        });

        setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);

    }

    function pullDownAction () {

        window.location.reload();

    }

    function pullUpAction () {

        var page = currentPage++;

        Ajax(page);

        myScroll.refresh();

    }

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

</script>

</body>

</html>

ajax请求后台数据：

/**

 * Created by jstarseven on 2016/3/7.

 */

function Ajax(page) {

    $.ajax({

        type: "post",

        dataType: "JSON",

        url: "http://xx.xxxxxx.com/wx_service/getList",

        data: {'page': page},

        success: function (data) {

            var item = '';

            $.each(data, function (i, result) {

                var skill = result['skill'];

                item += '<li>';

                item += '<a href="getDoctorDetail.html?doctorId=' + result['doctorId'] + '">';

                item += '<div class="doc-pic"><img id="headPicUrl" src="' + result['headPicUrl'] + '" alt=""></div>';

                item += '<div class="doc-info">';

                item += '<h4><span>' + result['doctorName'] + '</span> <span>' + result['doctorTitle'] + '</span></h4>';

                item += '<p class="c-666">' + result['hospitalName'] + '</p>';

                item += '<p class="shanchang" id="skillBegin">';

                $.each(skill, function (i) {

                    item += '<span>' + skill[i] + '</span>';

                })

                item += '</p>';

                item += '<div class="feiyong">';

                item += '<span class="s1">&yen; <span>' + result['consultPrice'] + '</span>/次</span>';

                item += '<span class="s2"><span>' + result['payNumber'] + '</span>人付款，<span>' + result['praisePercent'] + '</span> 好评</span>';

                item += '</div>';

                item += '</div>';

                item += '</a>';

                item += '</li>';

            });

            $('.doctorUlList').append(item);

        },

        error: function () {

            console.log("当前请求失败");

        }

    });

}

-END-

iscroll实现移动端下拉刷新，上拉加载更多

iscroll实现移动端下拉刷新，上拉加载更多的更多相关文章

SwipeRefreshLayout实现下拉刷新上滑加载
1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...
Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView
在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...
juery下拉刷新，div加载更多元素并添加点击事件(二)
buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...
移动端下拉刷新上拉加载-mescroll&period;js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
Android如何定制一个下拉刷新，上滑加载更多的容器
前言下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...
Android 自定义 ListView 上下拉动&ldquo&semi;刷新最新&rdquo&semi;和&ldquo&semi;加载更多&rdquo&semi;歌曲列表
本文内容环境测试数据项目结构演示参考资料本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...
基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
基于SwiperJs的H5/移动端下拉刷新上拉加载更多
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
JS+CSS实现的下拉刷新/上拉加载插件
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...

随机推荐

Error&colon;Protocol family unavailable
在环境变量添加:_JAVA_OPTIONS 变量值为:-Djava.net.preferIPv4Stack=true 环境变量添加方法链接: http://jingyan.baidu.com/arti ...
php判断 &excl;==false
测试 if($res !== false){ echo "未定义通过<br>"; }else{ echo "未定义不通过<br>"; } ...
Emmet插件使用方法总结
Emmet插件使用方法总结在前端开发的过程中,一大部分的工作是写 HTML.CSS 代码.特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等. ...
【转】 NSString / NSMutableString 字符串处理，常用代码 (实例)
Objective-C 中核心处理字符串的类是 NSString 与 NSMutableString ,这两个类最大的区别就是NSString 创建赋值以后该字符串的内容与长度不能在动态的更改,除非重 ...
第一届&OpenCurlyDoubleQuote;百度杯”信息安全攻防总决赛&lowbar;Upload
题目见i春秋ctf训练营看到fast,就想抓个包看看,以前有道题是打开链接直接来了个跳转,当然这题不是查看返回包,发现一个好东西拿去base64解码看看感觉给出的字符串能继续解码,果然解码后得 ...
使用 Gradle 构建 Java 项目
使用 Gradle 构建 Java 项目这个手册将通过一个简单的 Java 项目向大家介绍如何使用 Gradle 构建 Java 项目. 我们将要做什么? 我们将在这篇文档航中创建一个简单的 Jav ...
【学习总结】之 3Blue1Brown系列
刷知乎看到的,各种力荐. YouTube: https://www.youtube.com/channel/UCYO_jab_esuFRV4b17AJtAw/featured B站: https:// ...
delphi try except语句和 try finally语句用法以及区别
try//尝试执行{SomeCode} except//出错的时候执行, Except有特定的错误类型 {SomeCode} end; try//尝试执行{SomeCode} finally//无论如 ...
5月9日——vue渲染过程中{{xxx}}显示
异常显示的原因: 这是由于浏览器的渲染机制导致的,浏览器是从头到尾如果你的js引用在底部,那么浏览器会先加载dom此时,你用于渲染的{{}}识别符,因为还没读到该识别符对应的js文件,所以会被解析 ...
【PAT】1020 Tree Traversals (25)（25 分）
1020 Tree Traversals (25)(25 分) Suppose that all the keys in a binary tree are distinct positive int ...