• 使用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实例,进行业务代码操作
    					}
    				}
    			});    
    

      

  • 相关阅读:
     随机选择数据库记录的方法
    交叉查询
    Delphi编辑器颜色设置
    Delphi Dll中多线程无法使用Synchronize同步的解决方法(转)
    Delphi FTP例子源码
    DELPHI之备忘四
    界面美化代码
    使Form响应滚轮事件
    配色卡
    Delphi http传输备忘
  • 原文地址:https://www.cnblogs.com/nelson-hu/p/7865606.html
Copyright © 2020-2023  润新知