<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的牙刷</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" type="text/css" href="css/mui.min.css" /> <link rel="stylesheet" type="text/css" href="css/iconfont.css" /> <link rel="stylesheet" type="text/css" href="css/main.css" /> <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script> <script type="text/javascript"> // 屏蔽分享 window.hiddenAllWechatMenu = true; </script> </head> <body> <div class="mui-content"> <div style="padding: 25px 0;text-align: center;" class="saomiao"> <div class="mui-content-padded"> <span class="iconfont icon-saomiao cl-red"></span> </div> <p>土豪,请继续添加您的牙刷吧!</p> </div> <div id="pullrefresh_tooth_list"> <div> <ul class="my-tooth-ul"> <li> <!--<div class="mui-card"> <div class="mui-card-header mui-card-media"> <img src="images/card-bai.png"> <div class="mui-media-body"> 柔性声波牙刷 <h6>产品尾号:3948</h6> <div class="footer"> JD购买<span class="mui-pull-right">延保截止:2019-12-20</span> </div> </div> </div> </div>--> </li> </ul> </div> </div> </div> <!-- 加载ing begin--> <div class="loading covers"> <div class="loading-bj"></div> <p>正在加载...</p> </div> <!-- 加载ing end --> <script type="text/javascript" src="js/mui.min.js"></script> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/wechat-utils-1.0.js"></script> <script type="text/javascript"> window.addEventListener('pageshow', function(e) { // 通过persisted属性判断是否存在 BF Cache if(e.persisted) { location.reload(); } }); var pageNumber = 0,pagesize = 10;//pageNumber第几页,pagesize每页条数 mui.init({ pullRefresh: { container: '#pullrefresh_tooth_list',//上拉加载容器 down: { //callback: pulldownRefresh }, up: { contentrefresh: '正在加载...',//上拉加载时显示的文字 callback: pullupRefresh//上拉加载的回调方法 } } }); /** * 上拉加载具体业务实现 */ function pullupRefresh() { ++pageNumber;//每次上拉页数+1 $.ajax(base_path + '/wechat/apparatus/select_apparatus_page?dates=' + new Date().getTime(), { data: { "pageNO":pageNumber,//pageNo第几页 "pageSize":pagesize//pageSize每页条数 }, dataType: 'json', xhrFields: { withCredentials: true }, crossDomain: true, type: 'get', timeout: 15000, success: function(dt) { if(dt.isRedirect) { location.href = dt.redirectURL; } else { if(dt.status) {//判断接口返回状态status var table = document.body.querySelector('.my-tooth-ul');//table是插入数据li的父级容器 mui('#pullrefresh_tooth_list').pullRefresh().endPullupToRefresh(dt.data.length<pagesize);//endPullupToRefresh(ture)表示没有更多数据了,停止上拉加载 if(dt.data.length<pagesize){ $(".mui-pull-caption-nomore").hide(); } mui.each(dt.data, function(index) { var li = document.createElement('li');//创建li标签 //li.className='mui-table-view-cell mui-media mui-col-xs-6';//給li标签className var baercode = this.apparatusBarcode.substring(this.apparatusBarcode.length-9); var store = ""; /*switch(this.apparatusStore){ case 1: store = "天猫"; break; case 2: store = "淘宝"; break; case 3: store = "京东"; break; case 4: store = "微信"; break; }*/ store = '<span class="">产品尾号:'+ baercode +'</span>'; li.innerHTML = '<div class="mui-card"><div class="mui-card-header mui-card-media"> <img src="'+this.productImg+'" style="margin-top: 5px;"> <div class="mui-media-body"> '+this.productName+' <div class="footer"> '+store+'<span class="mui-pull-right">延保截止:'+formatDateFull(this.apparatusWarrantyDate)+'</span> </div> </div> </div></div>'; table.appendChild(li);//将li插入table }); $(".loading").hide().css("opacity", "0"); //隐藏(正在加载...) } else { mui.alert("获取产品列表失败!"); } } }, error: function(xhr, type, errorThrown) { console.log(xhr); mui.alert("获取产品列表失败!网络错误"); } }); } //调用微信扫一扫 $(document).on('tap', '.saomiao', function() { wx.scanQRCode({ needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果, scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有 success: function(res) { /*var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果 */ } }); }); mui.ready(function() { mui('#pullrefresh_tooth_list').pullRefresh().pullupLoading(); }); </script> </body> </html>