国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁(yè) > 編程 > JavaScript > 正文

mui上拉加載功能實(shí)例詳解

2019-11-19 16:50:23
字體:
來(lái)源:轉(zhuǎn)載
供稿:網(wǎng)友

最近在做移動(dòng)端的項(xiàng)目,用到了mui的上拉加載,整理如下:

1、需要引入的css、js

<link rel="stylesheet" href="common/mui/css/mui.min.css" rel="external nofollow" ><script src="js/jquery-3.2.0.min.js"></script><script src="common/mui/js/mui.min.js"></script>

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

<div id="pullrefresh" class="mui-content mui-scroll-wrapper" class="maincon"><div class="mui-scroll"><div class="mui-table-view mui-table-view-chevron"></div></div></div>

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

<script type="text/javascript">(function(){//上拉加載下拉刷新mui.init({  pullRefresh: {  container: '#pullrefresh',  up: {    contentrefresh: '正在加載...',    callback: pullupRefresh    }  }});//加載更多var dataNum=12;//獲取數(shù)據(jù)總數(shù)var pageSize=3;//每頁(yè)顯示條數(shù)var counter=1;//計(jì)數(shù)器var pageStart=0;//開(kāi)始數(shù)據(jù)條數(shù)getData(pageStart,pageSize);function getData(pageStart,pageSize){//顯示數(shù)不足每頁(yè)顯示條數(shù)if(dataNum-pageStart<pageSize){pageSize=dataNum-pageStart;data(pageStart,pageSize);console.log("顯示數(shù)不足每頁(yè)顯示條數(shù)");}//顯示隱藏加載更多else if(pageStart+pageSize>=dataNum){data(pageStart,pageSize);console.log("沒(méi)有更多數(shù)據(jù)了");//沒(méi)有更多數(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+='<div class="goode-msg">'+'<div class="goods">'+'<p class="goode-name">嗚嗚嗚嗚</p>'+'<span class="goods-price">價(jià)格:10元</span>'+'<span class="icon-golden"></span>'+'<span class="goods-golden">送1111</span>'+'</div>'+'<div class="buycon">'+'<a class="buybtn buybtnabled" onclick="shop(5)">立即購(gòu)買(mǎi)</a>'+'</div>'+'</div>'}console.log(jQuery);jQuery(result).insertBefore('#pullrefresh .mui-scroll .mui-table-view');}/*** 上拉加載具體業(yè)務(wù)實(shí)現(xiàn)*/function pullupRefresh() {setTimeout(function() {var flag=counter++<(dataNum/pageSize)console.log(dataNum/pageSize);mui('#pullrefresh').pullRefresh().endPullupToRefresh((!flag)); //參數(shù)為true代表沒(méi)有更多數(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);}})();</script>

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

 //加載更多 var pageSize = 15;//每頁(yè)顯示條數(shù) var counter = 1;//計(jì)數(shù)器 var pageStart = 0;//開(kāi)始數(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=='';//判斷是否有返回值 當(dāng)沒(méi)有返回值的時(shí)候就為空,則代表沒(méi)有更多數(shù)據(jù)了    console.log(Flag);    if(Flag==false){     counter++;    }    $.each(data[0].dd, function (i, value) {     result += '<div class="goode-msg">' +       '<div class="goods">' +       '<input type="hidden" class="id" value="'+value.id+'">' +       '<input type="hidden" class="aa" value="'+value.aa+'">' +       '<p class="goode-name" id="title'+value.id+'">'+value.title+'</p>' +       '<input type="hidden" class="goods-price-cent" value="'+value.price.cent/100+'">' +       '<span class="goods-price">價(jià)格:<b id="price'+value.id+'">'+value.price.cent/100+'</b>元</span>' +       '<span class="icon-golden"></span>' +       '<span class="goods-golden">送<b id="ss'+value.id+'">'+value.ss+'</b>ss</span>' +       '</div>' +       '<div class="buycon">' +       '<a class="buybtn buybtnabled" onclick="shop('+i+')">立即購(gòu)買(mǎi)</a>' +       '</div>' +       '</div>'    });    jQuery(result).insertBefore('#pullrefresh .mui-scroll .mui-table-view');   }  } );}/** * 上拉加載具體業(yè)務(wù)實(shí)現(xiàn) */function pullupRefresh() { setTimeout(function () {  mui('#pullrefresh').pullRefresh().endPullupToRefresh((Flag)); //參數(shù)為true代表沒(méi)有更多數(shù)據(jù)了。  data(); }, 1500);}})();

5、踩的坑

注意:一定要先引入jquery、mui.js否則 js代碼會(huì)不識(shí)別mui。

在jquery中,如果要給動(dòng)態(tài)生成的節(jié)點(diǎn)綁定事件,以前要用live,現(xiàn)在用delegate或者on,原理是利用冒泡實(shí)現(xiàn)事件委托,也就是給生成節(jié)點(diǎn)的父節(jié)點(diǎn)預(yù)先綁定事件。

以上所述是小編給大家介紹的mui上拉加載功能實(shí)例詳解,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持!

發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 临安市| 万宁市| 当雄县| 静海县| 新乡县| 修武县| 庄河市| 梁河县| 霍林郭勒市| 沽源县| 崇明县| 清流县| 汪清县| 芦溪县| 江油市| 赤水市| 安仁县| 临沂市| 天津市| 乐都县| 满城县| 锡林浩特市| 大田县| 天水市| 如东县| 韶关市| 刚察县| 沙雅县| 锡林浩特市| 勐海县| 木兰县| 苍南县| 太谷县| 祁门县| 浦江县| 丘北县| 涟水县| 双流县| 灵丘县| 万州区| 晋州市|