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

      

  • 相关阅读:
    一日一技:微信开发-自定义菜单
    Redis五种数据结构
    .NET 5 部署在docker上运行
    一日一技:微信开发-发送模板消息
    Redis快速入门及应用
    面试官扎心一问:防止重复请求提交,有什么方案?
    在Windows上安装Docker
    上班摸鱼神器—VSCode 里也可以看股票 & 基金实时数据
    C# Nuget程序集StackExchange.Redis操作Redis 及 Redis 视频资源 及 相关入门指令 牛逼不,全都有
    Mongodb 更新某一条记录 C#
  • 原文地址:https://www.cnblogs.com/nelson-hu/p/7865606.html
Copyright © 2011-2022 走看看