真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

mui如何實現(xiàn)上拉加載功能

這篇文章給大家分享的是有關(guān)mui如何實現(xiàn)上拉加載功能的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)與策劃設(shè)計,岱岳網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:岱岳等地區(qū)。岱岳做網(wǎng)站價格咨詢:028-86922220

最近在做移動端的項目,用到了mui的上拉加載,整理如下:

1、需要引入的css、js



2、靜態(tài)頁的dom結(jié)構(gòu)




3、靜態(tài)頁面 js對應(yīng)的代碼


(function(){
//上拉加載下拉刷新
mui.init({
  pullRefresh: {
  container: '#pullrefresh',
  up: {
    contentrefresh: '正在加載...',
    callback: pullupRefresh
    }
  }
});
//加載更多
var dataNum=12;//獲取數(shù)據(jù)總數(shù)
var pageSize=3;//每頁顯示條數(shù)
var counter=1;//計數(shù)器
var pageStart=0;//開始數(shù)據(jù)條數(shù)
getData(pageStart,pageSize);
function getData(pageStart,pageSize){
//顯示數(shù)不足每頁顯示條數(shù)
if(dataNum-pageStart=dataNum){
data(pageStart,pageSize);
console.log("沒有更多數(shù)據(jù)了");
//沒有更多數(shù)據(jù)了
}else{
data(pageStart,pageSize);
console.log("顯示dataNum"+dataNum+"pageSize"+pageSize+"pageStart"+pageStart);
//顯示
}
}
function data(pageStart,pageSize){
//業(yè)務(wù)
var result="";
for(var i=pageStart;i<(pageStart+pageSize);i++){
result+=''+
''+
'嗚嗚嗚嗚

'+ '價格:10元'+ ''+ '送1111'+ ''+ ''+ '立即購買'+ ''+ '' } console.log(jQuery); jQuery(result).insertBefore('#pullrefresh .mui-scroll .mui-table-view'); } /** * 上拉加載具體業(yè)務(wù)實現(xiàn) */ function pullupRefresh() { setTimeout(function() { var flag=counter++<(dataNum/pageSize) console.log(dataNum/pageSize); mui('#pullrefresh').pullRefresh().endPullupToRefresh((!flag)); //參數(shù)為true代表沒有更多數(shù)據(jù)了。 var scroll = document.body.querySelector('.mui-scroll .mui-table-view'); var item = document.body.querySelectorAll('.goode-msg'); console.log(counter); if(flag){ console.log(counter); pageStart=counter*pageSize; data(pageStart,pageSize); } }, 1500); } })();

4、與服務(wù)端聯(lián)調(diào)時 js做了改動,如下:

 //加載更多
 var pageSize = 15;//每頁顯示條數(shù)
 var counter = 1;//計數(shù)器
 var pageStart = 0;//開始數(shù)據(jù)條數(shù)
 var Flag=true;
 data();
 function data() {
  //業(yè)務(wù)
  var result = "";
  $.ajax({
   type: 'post',
   url: '/xxx/xxx',
   async: false,
   dataType: "json",
   data: {page: counter},
   success: function (data) {
    Flag=data[0].dd==null||data[0].dd==undefined||data[0].dd=='';
//判斷是否有返回值 當沒有返回值的時候就為空,則代表沒有更多數(shù)據(jù)了
    console.log(Flag);
    if(Flag==false){
     counter++;
    }
    $.each(data[0].dd, function (i, value) {
     result += '' +
       '' +
       '' +
       '' +
       ''+value.title+'

' +        '' +        '價格:'+value.price.cent/100+'元' +        '' +        ''+value.ss+'ss' +        '' +        '' +        '立即購買' +        '' +        ''     });     jQuery(result).insertBefore('#pullrefresh .mui-scroll .mui-table-view');    }   }  ); } /**  * 上拉加載具體業(yè)務(wù)實現(xiàn)  */ function pullupRefresh() {  setTimeout(function () {   mui('#pullrefresh').pullRefresh().endPullupToRefresh((Flag)); //參數(shù)為true代表沒有更多數(shù)據(jù)了。   data();  }, 1500); } })();

感謝各位的閱讀!關(guān)于“mui如何實現(xiàn)上拉加載功能”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!


新聞標題:mui如何實現(xiàn)上拉加載功能
網(wǎng)站網(wǎng)址:http://weahome.cn/article/gehcoc.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部