mui框架實現上拉載入
阿新 • • 發佈：2019-01-08
如果你和我一樣一點也沒接觸過mui框架，先看大神關於mui詳解：
https://blog.csdn.net/qq_40147863/article/category/8079041
mui 有個開發文件預覽式 app，下載Hello mui App http://dcloud.io/hellomui/
官方下拉重新整理：http://dev.dcloud.net.cn/mui/pulldown/
官方上拉載入：http://dev.dcloud.net.cn/mui/pullup/
官方上拉載入原始碼如下：https://github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/pullrefresh.html
中國國內 - 可用API合集
https://blog.csdn.net/qq_40147863/article/details/82855787
<!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"> <style type="text/css"> .mui-content>.mui-table-view:first-child { margin-top: -1px; } </style> </head> <body> <!--下拉重新整理容器--> <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <!--資料列表--> <ul class="mui-table-view mui-table-view-chevron"></ul> </div> </div> <script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script> <script> mui.init({ pullRefresh: { container: '#pullrefresh', down: { style:'circle', callback: pulldownRefresh }, up: { auto:true, contentrefresh: '正在載入...', callback: pullupRefresh } } }); var count = 0; function pullupRefresh() { setTimeout(function() { mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //引數為true代表沒有更多資料了。 var table = document.body.querySelector('.mui-table-view'); var cells = document.body.querySelectorAll('.mui-table-view-cell'); var newCount = cells.length>0?5:20;//首次載入20條，滿屏 for (var i = cells.length, len = i + newCount; i < len; i++) { var li = document.createElement('li'); li.className = 'mui-table-view-cell'; li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>'; table.appendChild(li); } }, 1500); } function addData() { var table = document.body.querySelector('.mui-table-view'); var cells = document.body.querySelectorAll('.mui-table-view-cell'); for(var i = cells.length, len = i + 5; i < len; i++) { var li = document.createElement('li'); li.className = 'mui-table-view-cell'; li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>'; //下拉重新整理，新紀錄插到最前面； table.insertBefore(li, table.firstChild); } } /** * 下拉重新整理具體業務實現 */ function pulldownRefresh() { setTimeout(function() { addData(); mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); mui.toast("為你推薦了5篇文章"); }, 1500); } </script> </body> </html>
mui 結合 vue.js 處理資料（下拉重新整理，上拉載入）
https://blog.csdn.net/Young_Gao/article/details/83825611
https://blog.csdn.net/Young_Gao/article/details/83825611
mui中上拉重新整理事件a標籤中的連結、元素onclick事件在手機上點選不了
https://blog.csdn.net/abs1004/article/details/78112630
MUI移動端頁面跳轉
https://blog.csdn.net/xuepan1994/article/details/51900447
mui 上拉載入 實現分頁載入功能
https://www.cnblogs.com/vicky123/p/9075718.html
mui('#newsSports').on('tap', 'li', function() { //給li新增點選事件，直接寫普通的a標籤或者在元素上加onclick事件不成功
alert("---33----");
location.href = "news_detail.html";
});
mui.init(
{
pullRefresh : {
container:"#refreshContainer",
down: {
contentdown : "下拉重新整理",//可選，在下拉可重新整理狀態時，下拉重新整理控制元件上顯示的標題內容
contentover : "釋放立即重新整理",//可選，在釋放可重新整理狀態時，下拉重新整理控制元件上顯示的標題內容
contentrefresh : "正在重新整理...",//可選，正在重新整理狀態時，下拉重新整理控制元件上顯示的標題內容
style:'circle',//必選，下拉重新整理樣式，目前支援原生5+ ‘circle’ 樣式
color:'#2BD009', //可選，預設“#2BD009” 下拉重新整理控制元件顏色
height:'50px',//可選,預設50px.下拉重新整理控制元件的高度,
range:'100px', //可選 預設100px,控制元件可下拉拖拽的範圍
offset:'0px', //可選 預設0px,下拉重新整理控制元件的起始位置
auto: true,//可選,預設false.首次載入自動上拉重新整理一次
auto: true,
callback: pulltofresh
},
up: {
height:50,//可選.預設50.觸發上拉載入拖動距離
auto:true,//可選,預設false.自動上拉載入一次
contentrefresh : "正在載入...",//可選，正在載入狀態時，上拉載入控制元件上顯示的標題內容
contentnomore:'沒有更多資料了',//可選，請求完畢若沒有更多資料時顯示的提醒內容；
callback: pushtoloadmore
}
}
}
)
function pulltofresh() {
app.page = 1;
mui.ajax(adminUrl + 'common/newsServer/1?rows=10&page=' + app.page, {
type: 'get',
success: function(res){
app.sports = res.data;
console.log(res.data)
},
error: function(e) {
}
})
mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
mui('#newsSports').on('tap', '.mui-table-view-cell', function() { //給li新增點選事件，直接寫普通的a標籤或者在元素上加onclick事件不成功
mui.openWindow({
url: "news_detail.html"
})
});
}
function pushtoloadmore() {
app.page++;
mui.ajax(adminUrl + 'common/newsServer/1?rows=10&page=' + app.page, {
type: 'get',
success: function(res){
app.sports = app.sports.concat(res.data.data);
},
error: function(e) {
}
})
mui('#refreshContainer').pullRefresh().endPullupToRefresh();
}