mui的下拉重新整理上拉載入
阿新 • • 發佈：2020-12-13
技術標籤：javascript前端
mui上拉載入、下拉重新整理踩坑記錄
關於mui這個框架也沒啥多說的，自己在練習的時候稍微使用了下，正常使用嘛~~額也就那樣吧，遇到不正常的地方就。。。比如彈框裡面的放的資料超過了彈框的高度，在瀏覽器中除錯是支援滑動的，在手機端就…再比如這個上拉載入和下拉重新整理…別說了，太扯了…
當我用到上拉載入時，看到的官方文件是這樣子的：
mui.init({
pullRefresh : {
container:refreshContainer,//待重新整理區域標識，querySelector能定位的css選擇器均可，比如：id、.class等 此時的我內心一萬匹“***”奔騰而過，如此簡潔明瞭，像極了我“做人”的風格。就這，就這，just~so~so，然後就複製到自己的頁面中了，然後效果就——
<div class="list">
<div id="poetryList"></div>
</div>
mui.init({
pullRefresh : {
container:'.list',//待重新整理區域標識，querySelector能定位的css選擇器均可，比如：id、.class等
up : {
height:50,//可選.預設50.觸發上拉載入拖動距離
auto:true,//可選,預設false.自動上拉載入一次 也是木得毛病的嘛，是這麼回事，然而頁面是空白的，空白的，空白的！
然後再想去官網找點東西，就，就，就跟我空白的列表頁一樣——沒有更多了…
我就去*度去找答案，結果都在說好多坑吶，大致點如下：
- 外層必須再套一層容器（div）
- mui的列表只識別ul和li標籤
就這，那不是so easy，套一層就完了唄。
<div class="list" >
<ul id="poetryList">
</ul >
</div>
就套完之後就。。。列表出來了，但是那個上拉載入的提示文字居然在最頂端。列表的重新整理倒是木得問題，罷了罷了，列表出來先試試，放到手機上時，又雙叒叕出問題了，不能滑動，我TM，給你一刀。
然後又去搜啊搜，找啊找，終於找到了解決的辦法，就是加上mui自帶的拖動的類名。
<div class="list mui-content mui-scroll-wrapper">
<ul id="poetryList" class="mui-scroll">
</ul >
</div>
到這功能上算是實現了，奈何我H某人就是忍不了這種細節的樣式問題。
忽然想到官網示例中有例子，示例地址：https://www.dcloud.net.cn/hellomui/examples/pullrefresh_sub.html
去官網扒下程式碼如下：
<!--下拉重新整理容器-->
<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>
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
},
up: {
contentrefresh: '正在載入...',
callback: pullupRefresh
}
}
});
/**
* 下拉重新整理具體業務實現
*/
function pulldownRefresh() {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; 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);
}
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1500);
}
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');
for (var i = cells.length, len = i + 20; 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);
}
if (mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
}, 1000);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
這是套了兩層容器吶，我TM又是一刀。這些為啥在官方文件木得體現出來？？？！！！
然後複製過來稍微調整了下自己的程式碼，終於是好了。
<div id="pullrefresh" class="list mui-content mui-scroll-wrapper">
<div id="poetryList" class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron">
</ul>
</div>
</div>
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
height:50,//可選,預設50.觸發下拉重新整理拖動距離,
auto: true,//可選,預設false.首次載入自動下拉重新整理一次
contentdown : "下拉可以重新整理哦~",//可選，在下拉可重新整理狀態時，下拉重新整理控制元件上顯示的標題內容
contentover : "釋放立即重新整理呀~",//可選，在釋放可重新整理狀態時，下拉重新整理控制元件上顯示的標題內容
contentrefresh : "充滿詩意地重新整理中...",//可選，正在重新整理狀態時，下拉重新整理控制元件上顯示的標題內容
auto:true,
callback: pulldownRefresh
},
up: {
height: 50,
contentrefresh : "正在快樂地載入...",//可選，正在載入狀態時，上拉載入控制元件上顯示的標題內容
contentnomore:'好遺憾~沒有了哦~',//可選，請求完畢若沒有更多資料時顯示的提醒內容；
callback: pullupRefresh
}
}
});
/**
* 下拉重新整理
*/
function pulldownRefresh() {
current=1;
$.get(getLocalUrl() + "/api/poetry/getPoetryList?current=" + current + "&size=" + size, function (res) {
if (res.code == 200) {
console.log(res);
maxCurrent = res.data.pages;
let str = ''
var table = document.body.querySelector('.mui-table-view');
res.data.records.forEach(item => {
str += '<li class="item" id="' + item.id + '">\n' +
' <div class="item-img">\n' +
' <img src="' + item.picUrl + '" alt="">\n' +
' </div>\n' +
' <div class="item-content">\n' +
' <div class="item-title">' + item.poetryStr + '</div>\n' +
' <div class="item-comment">\n' +
' <div>\n' +
' <span> 999+</span>\n' +
' <span> 999+</span>\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
'</li>'
})
$(table).empty()
$(table).append(str)
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}
})
}
/**
* 上拉載入
*/
function pullupRefresh() {
setTimeout(function () {
$.get(getLocalUrl() + "/api/poetry/getPoetryList?current=" + current + "&size=" + size, function (res) {
if (res.code == 200) {
maxCurrent = res.data.pages;
current++;
mui('#pullrefresh').pullRefresh().endPullupToRefresh((current>maxCurrent));
let str = ''
var table = document.body.querySelector('.mui-table-view');
res.data.records.forEach(item => {
str += '<li class="item" id="' + item.id + '">\n' +
' <div class="item-img">\n' +
' <img src="' + item.picUrl + '" alt="">\n' +
' </div>\n' +
' <div class="item-content">\n' +
' <div class="item-title">' + item.poetryStr + '</div>\n' +
' <div class="item-comment">\n' +
' <div>\n' +
' <span> 999+</span>\n' +
' <span> 999+</span>\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
'</li>'
})
//$("#poetryList").append(str)
$(table).append(str)
}
})
},400)
}
效果如下(自覺忽略圖片，那是桌布圖裡隨便找個~~這就些許尷尬)：
···
如果你和我一樣需要調整頭部提示文字的上邊距和底下的下邊距避免遮擋可以修改mui.min.css如下位置
.mui-pull-top-pocket {
top: 40px
}
.mui-pull-bottom-pocket {
position: relative;
bottom: 13px;
height: 40px
}