mui+vue上拉載入
阿新 • • 發佈:2018-12-22
程式碼展示
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" href="{$resource}css/mui.min.css"> <link rel="stylesheet" href="{$resource}css/app.css"/> <style type="text/css"> .searchcontent{width: 100%;height: 40px;line-height: 40px;background: white;} .leftjt{width:20px;height: 20px;margin-top: 10px;float: left;} .close{display: inline-block;width: 16%;height: 28px;line-height: 13px;margin-top: 6px;} .searchinput{width: 71%;height: 28px;line-height: 28px;margin-left: 2%;border-radius: 5px;border: none;background: #F1F1F1;text-align: center;} #pullrefresh{top: 40px;} .productinfo{width: 45%;margin-left: 3.3333%;margin-bottom: 10px;display: inline-block;background: white;padding-top: 10px;} .productimg {width: 90%;height: 155px;margin-left: 5%;} .productname,.originalprice,.product_xinxi {width: 90%;margin-left: 5%;} .productname {font-size: 13px;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;height: 42px;} .originalprice {font-size: 8px;color: #999999;height: 20px;line-height: 20px;} .product_xinxi {color: crimson;height: 20px;line-height: 20px;} .p_money {font-size: 16px;margin-bottom: 5px;font-weight: 600;} .salesvolume {float: right;font-size: 8px;font-weight: 500;color: #999999;} .mui-table-view{background: #F1F1F1;} </style> </head> <body> <div id="searchproduct" class="mui-content"> <div class="searchcontent"> <img class="leftjt mui-action-back" src="{$resource}images/zuojt.png"/> <input @keypress="searchGoods" type="serch" v-model="keywords" placeholder="請輸入搜尋關鍵字" class="searchinput"/> <button @click="setkeywords" class="close">搜尋</button> </div> <!--下拉重新整理容器--> <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <div id="closehtml" class="mui-table-view mui-table-view-chevron"> </div> </div> </div> </div> <script src="{$resource}js/mui.min.js"></script> <script src="{$resource}js/vue.min.js"></script> <script type="text/javascript"> var page = 1; var count = 0; var status = 1; var productstatus = 0; var ifsearch = 0; var product = new Array(); var i_keyword = ""; //呼叫getUrlParam方法獲取跳轉連結引數 var groupid = getUrlParam("groupid"); //獲取跳轉連結url引數方法 function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //構造一個含有目標引數的正則表示式物件 var r = window.location.search.substr(1).match(reg); //匹配目標引數 if (r != null) { return unescape(r[2]); } else { return null; //返回引數值 } } mui.init({ pullRefresh: { container: '#pullrefresh', up: { contentrefresh: '正在載入...', callback: pullupRefresh } } }); var count = 0; //上拉載入具體業務實現 function pullupRefresh(keyword) { //輸入狀態不為空呼叫getProducthtml介面獲取資料 if(ifsearch==1){ getProducthtml(i_keyword); } setTimeout(function() { //介面資料狀態有資料為0無資料為1 if(status==0){ var closehtml = document.getElementById("closehtml"); mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count>=page)); //引數為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 + product.length; i < len; i++) { var li = document.createElement('div');//建立一個div元素 li.className = 'productinfo';//生成class類名為productinfo //在productinf下生成的資料 li.innerHTML = '<img class="productimg" src="'+product[i].product_pic+'"/><div class="productname">'+product[i].product_name+'</div><div class="originalprice">原價<s>¥'+product[i].market_price+'</s></div><div class="product_xinxi"><span class="p_money">¥'+product[i].shop_price+'</span><span class="salesvolume">銷量'+product[i].product_sales+'</span></div>'; table.appendChild(li); } }else{ //無資料顯示沒有更多資料了設狀態為(true) mui('#pullrefresh').pullRefresh().endPullupToRefresh((true)); } },300); } //獲取商品列表 function getProducthtml(keywords){ mui.get('{:u('Product/getProducthtml')}',//改成你自己的介面 { groupid:groupid, elemlen:page, keywords:keywords, status:"", }, function(data){ ++productstatus; if(data.status==1){ product = data.info; ++page; status=0; }else{ status=1; if(product==""){ mui.toast("沒有搜尋到該商品") } } },'json' ) } //初始化vue var vm = new Vue({ el:"#searchproduct", data:{ keywords:"" }, created:function(){ var that = this; }, methods:{ //搜尋框搜尋 setkeywords:function(){ this.searchdata(); }, //移動端虛擬鍵盤搜尋 searchGoods:function(event){ if (event.keyCode == 13) { //如果按的是enter鍵 13是enter event.preventDefault(); //禁止預設事件(預設是換行) this.searchdata(); } }, //搜尋 searchdata:function(){ i_keyword = this.keywords; if(i_keyword!=""){ ifsearch = 1; //不為空狀態\ //使用者再次搜尋清空所有資料重新渲染 document.getElementById("closehtml").innerHTML = ""; product = []; page = 1; count = 0; //重新啟用上拉載入 mui('#pullrefresh').pullRefresh().refresh(true); //呼叫上拉載入 pullupRefresh(i_keyword); }else{ mui.toast("搜尋內容不能為空") } } } }) </script> </body> </html>