mui用ajax上拉加载更多,mui上拉加载更多的使用
demo地址
mui框架中上拉加載的坑
1、在函數自己上拉加載行為后的回調函數
2、在mui封裝的上拉加載中，點擊某一項會失效。
解決方法
1、該函數是必須要寫的，用來寫自己的邏輯需求，但是一般情況下，需要設置顯示為“加載更多”還是“沒有更多數據了”。看了一些博客和官方文檔，基本上都把這個設置放在了定時器中并在定時器中調用獲取數據的方法(自己的業務需求)。
2、在mui封裝的上拉加載中，點擊某一項會失效。這個是真的很坑。就是采用事件監聽的方式，阻止默認行為
示例代碼
mui('選擇器').on('tap','選擇器',function(e){
e.preventDefault();
//自己的業務邏輯
})
一開始我將上述代碼放在了mui.plusready()函數里面，可是事件并沒有觸發，所以，當我將它mui.plusready()中拿出來，事件就起作用了，我并不知道這是為什么，如果你偶爾看到這篇文章，可以告訴我一下。
demo代碼
window.onload = function () {
/*750代表設計師給的設計稿的寬度，你的設計稿是多少，就寫多少;100代表換算比例，這里寫100是
為了以后好算,比如，你測量的一個寬度是100px,就可以寫為1rem,以及1px=0.01rem等等*/
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
關于mui的上拉加載.mui-content {
background: #fff;
}
h2 {
font-size: 0.28rem;
line-height: .6rem;
padding-left: 10px;
}
.mui-scroll-wrapper {
top: .75rem;
}
上拉加載
list1
list2
list3
list4
(function ($, doc) {
var listContainer = doc.getElementById('listContainer');
mui.init({
pullRefresh: {
container: '#pullRefresh',//待刷新區域標識，querySelector能定位的css選擇器均可，比如：id、.class等
up: {
height: 50,//可選.默認50.觸發上拉加載拖動距離
auto: true,//可選,默認false.自動上拉加載一次
contentrefresh: "正在加載...",//可選，正在加載狀態時，上拉加載控件上顯示的標題內容
contentnomore: '沒有更多數據了',//可選，請求完畢若沒有更多數據時顯示的提醒內容；
callback: pullfreshFunc //必選，刷新函數，根據具體業務來編寫，比如通過ajax從服務器獲取新數據；
}
}
});
var flag = true, counter = 1, pageSize = 10;
function pullfreshFunc() {
setTimeout(function () {
mui('#pullRefresh').pullRefresh().endPullupToRefresh(flag);//參數為true代表沒有更多數據了。
getData();
}, 500);
}
function getData() {
mui.ajax({
type: 'get',
url: '../json/data.json',
data: {'counter': counter},
success: function (response) {
console.log(response);
let list = response.peopleList;
let html = "";
flag = !(list[0] == null || list[0] == "" || !list[0]);
if (flag) {
counter++;
}
for (let i = 0; i < list.length; i++) {
html += '
' + list[i].name + '';}
jQuery('#listContainer').append(html)
},
error: function (error) {
console.log(error)
}
})
}
//點擊單項事件
// mui中上拉加載中的坑1：點擊事件失效(不需要放在mui.plusReady()中)
mui('#pullRefresh').on('tap', 'li.mui-table-view-cell', function (e) {
e.preventDefault();
console.log('觸發點擊事件了')
})
}(mui, document))
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的mui用ajax上拉加载更多,mui上拉加载更多的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css flex布局 padding,C
- 下一篇： dorado7ajax,Dorado7