基于zepto的移动端下拉刷新小插件

慢条斯理的小可
上次开发笔记里《基于zepto和WeUI的H5页面开发笔记》提到下拉刷新功能,这是很基本很常用的功能,为了下次自己更便捷的使用,便简单的封装了一下 KScroll.js

简单样例

这里先上一个基于zepto和WeUI的列表下拉刷新的例子:

image.png

demo.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>基于WeUI和zepto.js的列表下拉刷新样例</title>
    <!-- 引入 WeUI CDN 链接 -->
    <link rel="stylesheet" href="https://res.wx.qq.com/t/wx_fed/weui-source/res/2.5.6/weui.css" />
    <!-- 引入 zepto CDN 链接 -->
    <script src="https://cdnjs.gtimg.com/cdnjs/libs/zepto/1.1.4/zepto.js"></script>
    <!-- 引入 自定义滚动刷新 -->
    <script src="./KScroll.js"></script>
    <style>
        html,
        body {
            height: 100%;
        }

        .container {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow: hidden;
            color: var(--weui-FG-0);
        }

        .page {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            box-sizing: border-box;
            z-index: 1;
        }

        .page__bd {
            height: 100%;
            overflow: hidden;
        }

        .part-content {
            padding: 5px;
        }

        .g-scroll-container {
            height: 60%;
            border: 1px solid #e5e5e5;
            overflow: auto;
        }
    </style>
</head>

<body data-weui-theme="light">
    <div class="container" id="container">
        <div class="page">
            <div class="page__bd">
                <!-- 第二个tab的panel内容 -->
                <div style="height: 40%;">
                    <div class="part-content">
                        <h5>下拉刷新样例</h5>
                        const ks = <b>new KScroll</b>(option);<br />
                        <b>option:</b><br />
                        containerEle //滚动内容的容器元素<br />
                        contentEle //滚动的内容元素<br />
                        loadMoreEle //滚动的内容里的最后的加载更多的元素<br />
                        <b>pullToRefresh</b> //加载下一页的数据的钩子函数<br />
                        //加载完渲染完,回调<b>ks.refreshed(page,isEnd)</b>更新状态
                        <br />
                    </div>
                </div>
                <div class="g-scroll-container">
                    <div class="weui-cells g-scroll-content">
                        <div role="option" class="weui-cell ">
                            <div class="weui-cell__bd">
                                <p>标题文字1</p>
                            </div>
                        </div>
                        <div role="option" class="weui-cell ">
                            <div class="weui-cell__bd">
                                <p>标题文字2</p>
                            </div>
                        </div>
                        <div role="option" class="weui-cell ">
                            <div class="weui-cell__bd">
                                <p>标题文字3</p>
                            </div>
                        </div>
                        <div role="option" class="weui-cell ">
                            <div class="weui-cell__bd">
                                <p>标题文字4</p>
                            </div>
                        </div>
                        <div role="option" class="weui-cell ">
                            <div class="weui-cell__bd">
                                <p>标题文字5</p>
                            </div>
                        </div>
                        <div role="option" class="weui-cell ">
                            <div class="weui-cell__bd">
                                <p>标题文字6</p>
                            </div>
                        </div>
                        <div role="option" class="weui-cell ">
                            <div class="weui-cell__bd">
                                <p>标题文字7</p>
                            </div>
                        </div>
                        <div role="option" class="weui-cell ">
                            <div class="weui-cell__bd">
                                <p>标题文字8</p>
                            </div>
                        </div>

                        <div role="alert" class="weui-loadmore">
                            <span aria-hidden="true" role="img" aria-label="加载中" class="weui-primary-loading">
                                <i class="weui-primary-loading__dot"></i>
                            </span>
                            <span class="weui-loadmore__tips">正在加载</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
       // 引入下面js
    </script>
</body>

demo.js

$(function () {

    const pageInfo = {
        total: 3,
        pageSize: 8
    }

    const ks = new KScroll({
        containerEle: $('.g-scroll-container')[0], //滚动内容的容器元素
        contentEle: $('.g-scroll-content')[0], //滚动的内容元素
        loadMoreEle: $(".g-scroll-container .weui-loadmore")[0], //滚动的内容里的最后的加载更多的元素
        pullToRefresh: function (toPage) {
            //加载下一页的数据渲染,并回调 gs.refreshed(page,isEnd)
            setTimeout(function () {
                let addHtmlStr = '';
                for (let index = 0; index < pageInfo.pageSize; index++) {
                    addHtmlStr += ` <div role="option" class="weui-cell  weui-cell_example">
                                <div class="weui-cell__bd">
                                    <p>标题文字${(toPage-1)*pageInfo.pageSize+index+1}</p>
                                </div>
                            </div>`;
                }
                $(ks.option.loadMoreEle).before(addHtmlStr);
                ks.refreshed(toPage, toPage == pageInfo.total);
            }, 1500);
        }
    });

});

KSCroll.js

基于zepto的简单的下拉刷新插件,前提为调用者在界面添加了loadmore的元素。
KScroll主要是
1、监听touch事件,判断是否滚动到了底部;
2、达到加载下一页的条件则回调pullToRefresh函数,调用者在这请求数据刷新DOM;
3、最后调用者调用refreshed方法更新下拉刷新的状态(数据是否已经加载完毕),KScroll判断如果是结束状态则隐藏loadmore元素。

const KScroll = function (opt) {

    const _this = this;

    _this.option = {
        containerEle: $('.kscroll-container')[0],
        contentEle: $('.kscroll-content')[0],
        loadMoreEle: $(".kscroll-container .weui-loadmore")[0],
        touchStatus: 0, // 0 init 1 move 当前状态,move为正在touchmove
        page: 1, //页数
        scrollToNext: false, //滚动满足刷新下一页的标志
        isEnd: false, //是否已经滑到底部了,用于判断是否处理滚动 (如果只有一页,需设置为true,无需滚动加载)
        loading: false, //正在加载中标志
        pullToRefresh: undefined //满足滑动刷新加载数据的回调函数
    };

    _this.option = Object.assign({}, _this.option, opt);

    //加载数据刷新后回调
    _this.refreshed = function (page, isEnd) { //page 加载的页数 isEnd 是否已经加载到底部了
        _this.option.loading = false;
        if (isEnd) {
            _this.option.isEnd = true;
            $(_this.option.loadMoreEle).remove();
        }
    }

    //初始化动作(监听touch事件)
    _this.init = () => {

        //监听手指初始触碰
        $(_this.option.contentEle).on("touchstart", function (e) {
            if (_this.option.isEnd) return;
            _this.option.touchStatus = 1;
        });

        //判断向上时,如果滚动条在顶部,那么逐渐增加下拉刷新的高度
        $(_this.option.contentEle).on("touchmove", function (e) {

            if (_this.option.isEnd) return;

            if (!_this.option.scrollToNext) {

                var aa = $(_this.option.containerEle).height();
                var bb = $(this).scrollTop();
                var cc = $(this).height();
                var dd = aa - bb - cc;

                if (dd < 50) {
                    _this.option.scrollToNext = true;
                }
            }
        });

        //下拉刷新高度达到一定值之后刷新页面
        $(_this.option.contentEle).on("touchend", function (e) {
            if (_this.option.isEnd) return;
            if (_this.option.touchStatus == 1 && _this.option.scrollToNext && !_this.option.loading) {
                _this.option.loading = true;
                _this.option.page++;
                _this.option.pullToRefresh && _this.option.pullToRefresh(_this.option.page);
                _this.option.scrollToNext = false;
            }
            _this.option.touchStatus = 0;
        });

    }

    _this.init(); //初始化动作(监听touch事件)

}

其他

本文只是自己写的没有动画的简单的(基于zepto.js的)下拉刷新插件。
关于上拉刷新(带回弹动画)我看了一个效果看着还不错的(基于原生js的)《写了一个下拉刷新插件》,亲们需要可参考,谢谢作者,在这我也mark一下。

PS:至于上拉、下拉,方向好像容易误解哈哈,我这上拉、下拉指的是在列表的顶部还是底部滚动刷新的。
阅读 297
2 声望
1 粉丝
0 条评论
2 声望
1 粉丝
文章目录
宣传栏