溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“mui滾動控件scroll在ios上的bug怎么解決”，內容詳細，步驟清晰，細節處理妥當，希望這篇“mui滾動控件scroll在ios上的bug怎么解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
首先代碼如下:
<body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h2 class="mui-title">銷售業績匯總查詢結果</h2> </header> <!--內容主體--> <!--下拉刷新容器--> <div id="pullrefresh" class="mui-content "> <div <!--數據列表--> <table class="table"> <!--<caption>響應式表格布局</caption>--> <thead> <tr> <th>類品</th> <th>季節</th> <th>成交數量</th> <th>成交金額</th> </tr> </thead> <tbody class="my_table_body"> <tr class="my_tr"> </tr> </tbody> </table> </div> </div> </body>
這是一個table表格布局,由于超出屏幕,有沒有加上scroll控件,會使用默認滾動實現,
但是默認實現在我所測試的android機器上是沒問題的,在ios上卻出現上滑不能回彈的問題,
所以,我修改下代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<style>html,
body {
background-color:#efeff4;
}
.title {
margin:20px 15px 10px;
color:#6d6d72;
font-size:15px;
}
.progress-red {
width:100%;
height:25px;
background-color:#BD2130;
}
.progress-yellow {
width:0%;
height:25px;
background-color:#E0A800;
}</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h2 class="mui-title">銷售業績匯總查詢結果</h2>
</header>
<!--內容主體-->
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--數據列表-->
<table class="table">
<!--<caption>響應式表格布局</caption>-->
<thead>
<tr>
<th>類品</th>
<th>季節</th>
<th>成交數量</th>
<th>成交金額</th>
</tr>
</thead>
<tbody class="my_table_body">
<tr class="my_tr">
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script>false,
pullRefresh: {
container: '#pullrefresh',
up: {
// auto: true, //可選,默認false.首次加載自動上拉刷新一次
contentrefresh: "正在加載...", //可選，正在加載狀態時，上拉加載控件上顯示的標題內容
callback: pullupRefresh
}
}
});
if(mui.os.plus) {
mui.plusReady(function()
setTimeout(function()
console.log("plusAPI加載完畢2!");
mui('#pullrefresh').pullRefresh().pullupLoading();//這句可以自動執行上拉刷新,有了這句就不要 auto:true
}, 1000);
});
} else {
mui.ready(function()
console.log("muiDOM加載完畢!");
mui('#pullrefresh').pullRefresh().pullupLoading();//這句可以自動執行上拉刷新,有了這句就不要 auto:true
});
}
var begindate;
var enddate;
mui.plusReady(function()
console.log("plusAPI加載完畢1!");
var data = plus.webview.currentWebview(); //可以得到上個頁面攜帶過來的數據
begindate = data.startdate;
enddate = data.enddate;
});
/**
* 上拉加載具體業務實現
*/
var page = 1;
function pullupRefresh()
console.log("上拉刷新請求數據開始!");
mui('#pullrefresh').pullRefresh().endPullupToRefresh(); //參數為true代表沒有更多數據了。
getdata(page++, 25, begindate, enddate);
console.log("開始結束時間:!" + begindate + "---" + enddate);
console.log("本次上拉刷新請求數據結束!");
}
function getdata(page,
size,
begindate,
enddate)
var wd = plus.nativeUI.showWaiting();
console.log("開始網絡請求");
mui.post(plus.storage.getItem("url"), {
act: "salesreport",
username: plus.storage.getItem('TOKEN_USER'),
key: plus.storage.getItem('TOKEN_LOGIN'),
page: page,
size: size,
v_begindate: begindate,
v_endate: enddate
}, function(data)
//服務器返回響應，根據響應結果，分析是否登錄成功；
//服務器返回響應，根據響應結果，分析是否登錄成功；
console.log("請求成功!");
console.log("響應狀態" + data.status);
wd.close();
if(data.status != "1") {
mui.alert(data.info);
console.log("請求失敗!");
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
return;
}
if(data.lists.length == 0) {
mui.toast("沒有數據了!");
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
return;
}
if(data.status == 1) {
var table = document.body.querySelector('.my_table_body');
for(var i = 0; i < data.lists.length; i++) {
var tr = document.createElement("tr");
tr.innerHTML = '<td> ' + data.lists[i].attribname + '</td>' + '<td> ' + data.lists[i].attribname1 + '</td>' + '<td> ' + data.lists[i].qty + '</td>' + '<td> ' + data.lists[i].amt + '</td>';
// table.insertBefore(tr, table.lastChild);
table.appendChild(tr);
//mui('.mui-scroll-wrapper').scroll();
}
}
if(data.lists.length < size) {
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
return;
}
}, 'json');
}
</script>
</html>修改為:
<header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <!--<a class=" mui-icon mui-icon-email mui-pull-right" onclick="sendMessage()"></a>--> <h2 id="title" class="mui-title">會員回訪</h2> </header> <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <div class="mui-content"> <!--你的上拉刷新內容--> </div> </div> <div>
讀到這里，這篇“mui滾動控件scroll在ios上的bug怎么解決”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
