h5页面的下拉分页 解决IOS 13以上 版本不兼容问题

Posted 2021-03-06 二小子

h5页面中使用上拉分页 可以引入 minirefresh-all.js 第三方插件来完成

// 初始化页码
                var page = 0;

                // miniRefresh 对象
                var miniRefresh = new MiniRefresh({
                    container: ‘#minirefresh‘,
                    down: {
                        isLock: false, //是否禁用下拉刷新
                        callback: function() {
                            doAjax(‘down‘);
                        }
                    },
                    up: {
                        isAuto: true,
                        callback: function() {
                            doAjax(‘up‘);
                        }
                    }
                });

                // 组装 ajax 分页函数。参数 downOrUp 判断是下拉刷新还是上拉加载。
                // 特别提示：若你仅使用下拉刷新或上拉加载的其中一项，可不用组装 ajax 分页函数了，直接将 ajax 分页放在下拉刷新或上拉加载的回调 callback 里。
                var doAjax = function(downOrUp) {
                    if(downOrUp == ‘down‘) {
                        page = 1; // 下拉刷新页码设置
                    } else {
                        page++; // 上拉加载递增页码
                    }

                    $.ajax({
                        url: ‘data/listdata‘ + page + ‘.json‘, // 请求网址
                        type: ‘GET‘,
                        data: { // 请求参数，一般会带上页码
                            ‘page‘: page,
                            ‘t‘: new Date().getTime() // 防止GET请求缓存
                        },
                        success: function(data) {
                             var json = eval("("+data+")");
                             var flag = json.code;
                             var dat = json.data;
                             var msg = json.msg;
                             if(flag == "00"){
                                // 下面这段请根据自己的数据结构来处理
                                    var arrLen = dat.length;
                                    
                                    if(arrLen > 0) {
                                        var html = ‘‘;
                                        
                                            for(var i = 0; i < dat.length; i++){
                                                html += "<div class=‘li></div>" ;
                                            }
                                        setTimeout(function() { // 使用 setTimeout 函数是方便演示的，你可以不用 setTimeout 函数
                                            if(downOrUp == ‘down‘) {
                                                $(‘#listdata‘).html(‘‘);
                                                $(‘#listdata‘).append(html); // DOM 插入数据
                                                if(json.totalPages == page) { // 是否已取完数据页json.totalPages为总页数
                                                    miniRefresh.endDownLoading(true);  // 结束上拉加载
                                                } else {
                                                    miniRefresh.endDownLoading(false);
                                                }
                                                
                                            } else {
                                                $(‘#listdata‘).append(html);
                                                if(json.totalPages == page) { // 是否已取完数据页 json.totalPages为总页数
                                                    miniRefresh.endUpLoading(true); // 结束上拉加载
                                                } else {
                                                    miniRefresh.endUpLoading(false);
                                                }
                                            }
                                        }, 300);
                                    } else {
                                        if(downOrUp == ‘down‘) {
                                            $(‘#listdata‘).html(‘‘);
                                            miniRefresh.endDownLoading(true);
                                        } else {
                                            miniRefresh.endUpLoading(true);
                                        }
                                    }
                             }else{
                                 alert(msg);
                             }
                        },
                        error: function() {
                            if(downOrUp == ‘down‘) {
                                $(‘#listdata‘).html(‘‘);
                                miniRefresh.endDownLoading(true);
                            } else {
                                miniRefresh.endUpLoading(true);
                            };
                        }
                    });
                };

但是最近发现这个插件对ios 13以上的系统支持不是特别友好，所有对插件进行优化

无法修改插件使既使 安卓和IOS 13以下的版本适用同时也让IOS 13以上的版本适用 所以采用一种比较笨的办法解决

<!-- 引入 miniRefresh JS -->
		<script type="text/javascript">
			var str= navigator.userAgent.toLowerCase(); 
		    var ver=str.match(/cpu iphone os (.*?) like mac os/);
		    if(!ver){
		    	document.write("<scr"+"ipt src="js/minirefresh-and-ios12.js"></sc"+"ript>");
		    }else if(ver[1].replace(/_/g,".").substring(0,2) >= 13){
		        //alert("你当前的Ios系统版本为："+ver[1].replace(/_/g,"."));
		        document.write("<scr"+"ipt src="js/minirefresh-ios13.js"></sc"+"ript>");
		    }else{
		    	document.write("<scr"+"ipt src="js/minirefresh-and-ios12.js"></sc"+"ript>");
		    }
			
		</script>

　　优化后的插件 下载地址：

链接: https://pan.baidu.com/s/1nb1Po59qyrqmif4hXymPYw 提取码: kxq1