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

上次开发笔记里《基于zepto和WeUI的H5页面开发笔记》提到下拉刷新功能,这是很基本很常用的功能,为了下次自己更便捷的使用,便简单的封装了一下 GScroll.js
基于zepto的移动端下拉刷新小插件_第1张图片
demo.html




    
    
    基于WeUI和zepto.js的列表下拉刷新样例
    
    
    
    
    
    
    



    
下拉刷新样例
const gs = GScroll(option);
option:
containerEle //滚动内容的容器元素
contentEle //滚动的内容元素
loadMoreEle //滚动的内容里的最后的加载更多的元素
pullToRefresh //加载下一页的数据的钩子函数
//加载完渲染完,回调gs.refreshed(page,isEnd)更新状态

标题文字1

标题文字2

标题文字3

标题文字4

标题文字5

标题文字6

标题文字7

标题文字8

GScroll.js

const GScroll = function (opt) {

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

    const _thisGS = Object.assign({}, basicOption, opt);

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

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

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

        if (_thisGS.isEnd) return;

        if (!_thisGS.scrollToNext) {

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

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

    //下拉刷新高度达到一定值之后刷新页面
    $(_thisGS.contentEle).on("touchend", function (e) {
        if (_thisGS.isEnd) return;
        if (_thisGS.touchStatus == 1 && _thisGS.scrollToNext && !_thisGS.loading) {
            // console.log(`请求第${_thisGS.page}列表数据`);
            _thisGS.loading = true;
            _thisGS.page++;
            _thisGS.pullToRefresh && _thisGS.pullToRefresh(_thisGS.page);
            _thisGS.scrollToNext = false;
        }
        _thisGS.touchStatus = 0;
    });

    return _thisGS;
}

你可能感兴趣的:(基于zepto的移动端下拉刷新小插件)