zoukankan      html  css  js  c++  java
  • 使用mescroll来实现移动端页面上拉刷新, 下拉加载更多功能

    * mescroll请参考官方文档

    1. 使用mescroll实现下拉滑动的效果: (仅仅效果, 有的页面不需要刷新数据, 只要你能下拉就行)

    代码如下:

    var mescroll = new MeScroll('mescroll', {
                    
                    up: {
                        use: false // 不配置上拉
                    },
                    down: {
                        auto: false, 
                        htmlContent: ' ', // 下拉内容设为空
                        callback: function(ms) {
                            console.log('down');
                            ms.endByPage(0, 0); // mescroll.endError() 效果一样//回掉为空, 结束页为空
                        }
                    }
                    
                });

    2. 案列2: 使用上拉刷新功能, 下拉只提供效果

                var mescroll = new MeScroll('mescroll', {
    				
    				up: {
    					noMoreSize: 1,
    					htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>',
    					htmlNodata: '<p class="upwarp-nodata">-- 没有数据啦 --</p>',
    					callback: function(page, ms) {
    						
    						console.log('up');
                                 // 业务代码部分 $scope.search($scope.condition, ms); } }, down: { auto: false, htmlContent: ' ', callback: function(ms) { console.log('down'); mescroll.endErr(); // 使用endError把下拉的效果关闭(内容回到原位), mescroll内部会自动恢复原来的页码,时间等变量 } } });

      3.  使用上拉加载, 下拉重置刷新的功能:

            var mescroll = new MeScroll('mescroll', {
    				up: {// 只需要配置上拉刷新部分, mescrol会默认开启下拉刷新,并重置当前页为第一页,然后调用up.callback()
    					noMoreSize: 1,
    					htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>',
    					htmlNodata: '<p class="upwarp-nodata">-- 没有数据啦 --</p>',
    					page: { // 要使用它提供的分页参数, 把分页功能托管给他
    						num : 0,
    						size : $scope.pageInfos.size, 
    						time: null
    					},
    					callback: function(page, ms) { // 获取回掉里的分页和mescroll实例
    						$scope.loadUncommitIssues(page, ms); // 传递分页对象和mescroll实例,进行业务代码操作
    					}
    				}
    			});    
    

      

  • 相关阅读:
    《C++必知必会》读书笔记
    看美图是一种享受
    C指针-指向另一指针的指针
    顺序队列基本操作
    Using Windows Live Writer to write first offline blog
    堆和栈的区别 [摘录]
    进程与线程的区别
    《Effective C#》
    析构函数virtual与非virtual区别
    常用SQL语句技法
  • 原文地址:https://www.cnblogs.com/nelson-hu/p/7865606.html
Copyright © 2011-2022 走看看