h5頁面的下拉分頁 解決IOS 13以上 版本不兼容問題

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