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

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

demo.html

    
    
    
    
    
    
    
    
    
    



    

        

            

                
                

                    

                        
下拉刷新样例
                        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;
}