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

大道七哥

发布于 2019-09-10 14:46:16

1.8K0

发布于 2019-09-10 14:46:16

文章被收录于专栏：大道七哥

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-

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016-03-07 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html