咨詢頁面 · APP模塊

# 咨詢頁面 >## 包含： > 1.下拉刷新功能 2.上拉加載 * * * * * ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <title>資訊</title> <link rel="stylesheet" type="text/css" href="../../css/aui.css" /> <style> .con { color: #666666; margin: 10px 10px 0 0; } .favor:before { color: #ccc; } .share:before { color: #ccc; } span { font-size: 13px; } h3 { font-size: 18px; } .aui-list-view-cell:active{ background-color:#f5f5f5; -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } </style> </head> <body> <div class="aui-content"> <ul class="aui-list-view aui-list-view-con" id="megList">  </ul> </div> </body> <script type="text/javascript" src="../../script/api.js"></script> <script type="text/javascript" src="../../script/doT.min.js"></script>  <script type="text/x-dot-template" id="MgT"> {{ for (var i = 0; i < it.length; i++){ }} <li class="aui-list-view-cell aui-img" tapmode onclick="fnOpenArticle({{=it[i].tid}},{{=it[i].object_id}})"> <img class="aui-img-object aui-pull-right" src="{{=it[i].smete}}"> <div class="aui-img-body"> <h3>{{=it[i].post_title}}</h3> <div class='con'> <span class="aui-pull-left">{{=it[i].post_modified}}</span> <span class="aui-pull-right "> {{=it[i].post_like}}瀏覽</span> <span class="aui-pull-right ">{{=it[i].post_like}} 點贊 </span> </div> </div> </li> {{ }; }} </script> <script type="text/javascript"> //插入文章列表 function fnMlist_con(data_) { var apendText = $api.byId('MgT').text; var fnapendText = doT.template(apendText); var html = fnapendText(data_); var list = $api.dom('#megList'); $api.append(list, html); } //獲取資訊列表信息 var limit = 5; //文章數據每頁顯示數目 var skip = 0; //文章數據起始值 function fnMlist(reload_) { if (reload_) { skip = 0; } api.ajax({ url: 'http://www.sytest.com.cn/index.php?g=Osapp&m=Message&a=M_list', method: 'get', cache: true, timeout: 30, dataType: 'json', data: { values: { limit : limit, skip : skip } } }, function(ret, err) { if (ret) { skip += limit; if (reload_) { $api.dom('#megList').innerHTML = ''; } fnMlist_con(ret); //獲取資訊列表信息 } }); //加載完后關閉模態框 api.hideProgress(); //加載完畢后停止下拉刷新 api.refreshHeaderLoadDone(); } apiready=function() { api.parseTapmode(); fnMlist(true); //下拉刷新 api.setRefreshHeaderInfo({ visible: true, bgColor: '#F0F0F0', textDown: '下拉刷新...', textUp: '松開刷新...', showTime: true }, function(ret, err) { api.showProgress({ animationType: 'zoom', title: '努力加載中...', text: '先喝杯茶...', modal: true }); fnMlist(true); }); //上拉顯示更多數據 api.addEventListener({ name: 'scrolltobottom', }, function(ret, err) { fnMlist(false); }); } //列表點擊 //tid 文章分類tid | pid 文章object.id function fnOpenArticle(tid,pid) { api.openWin({ name: 'article_win', url: './article_win.html', pageParam : {tid:tid,pid:pid}, slidBackEnabled: 'false' }); } </script> </html> ~~~ > 效果如下 ![](https://box.kancloud.cn/e87fef27b0b21b352937514629e55d6c_561x921.jpg) * * * * * ### 點擊詳情頁代碼 > win頁面代碼 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <link rel="stylesheet" type="text/css" href="../../css/aui-win.css" /> <style type="text/css"> </style> </head> <body> <header class="aui-bar aui-bar-nav aui-bar-info" id="aui-header"> <a class="aui-btn aui-btn-info aui-pull-left" tapmode onclick="closeWin()"> <span class="aui-iconfont aui-icon-left"></span> </a> <div class="aui-title">文章詳情</div> <a class="aui-iconfont aui-icon-menu aui-pull-right"></a> </header> </body> <script type="text/javascript" src="../../script/api.js"></script> <script type="text/javascript"> apiready = function(){ var tid = api.pageParam.tid; var pid = api.pageParam.pid; api.parseTapmode(); var header = $api.byId('aui-header'); $api.fixStatusBar(header); var headerPos = $api.offset(header); var body_h = $api.offset($api.dom('body')).h; api.openFrame({ name: 'article_frm', url: 'article_frm.html', bounces: false, pageParam : {tid:tid,pid:pid}, slidBackEnabled: 'false', rect: { x: 0, y: headerPos.h, w: 'auto', h: 'auto' } }) }; function closeWin(){ api.closeWin(); } </script> </html> ~~~ > frame頁面代碼 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <title>文章詳情</title> <link rel="stylesheet" type="text/css" href="../../css/aui.css"/> <style> .banner { padding: 10px; background: #fff; } .banner img { width: 100%; display: block; height: 200px; } .des { margin-top: 10px; margin-bottom: 10px } .banner h2 { padding: 1% 0 !important; color: #333 !important; font-size: 18px !important; font-weight: 700 !important; } .banner p { margin-bottom: 3%; margin-top: 3%; } .aui-content{ padding-bottom: 20px; } /*評論區域*/ .aui-content2 { padding: 10px; background: #ffffff; margin-bottom: 0; } img.aui-img-object { border-radius: 50%; } .laud { font-size: 14px; color: #999; } p { margin: 5px 0 !important; display: table; } .helper-tag { color: #666666; font-size: 12px; } .aui-list-view i.aui-iconfont { color: #666666; } .aui-badge { background-color: transparent; color: #666; font-size: 14px; } /*底部樣式設置*/ .aui-nav { height: 40px; /*background:#000;*/ } .f-text { } </style> </head> <body> <div class="main-content"> </div>  <div class='aui-content2'> 熱門評論 </div> <div class="aui-content"> <ul class="aui-list-view">  <li class="aui-list-view-cell"> <a class="aui-arrow-right"> <span class="aui-badge">查看更多評論</span> </a> </li> </ul> </div>  <footer class="aui-nav" id="aui-footer"> <ul class="aui-bar-tab"> <li class="active-warning" tapmode onclick=""> <span class="aui-iconfont aui-icon-share"></span> <span class='f-text'>分享</span> </li> <li id="tabbar2" tapmode onclick="collect()"> <span class="aui-iconfont aui-icon-favor"></span> <span class='f-text'>收藏</span> </li> <li id="tabbar3" tapmode onclick="openComment_list()"> <span class="aui-iconfont aui-icon-comment"></span> <span class='f-text'>評論</span> </li> </ul> </footer> </body> <script type="text/javascript" src="../../script/api.js"></script> <script type="text/javascript" src="../../script/doT.min.js"></script>  <script type="text/x-dot-template" id="postsT"> <div class="aui-content banner aui-tab"> <h1 class='aui-text-center aui-padded-10'>{{=it.post_title}}</h1> <img src="{{=it.smeta}}" /> <p class="des"> {{=it.post_excerpt}} </p> <div class='aui-line-x'></div> {{=it.post_content}} <div class="aui-btn aui-btn-default aui-btn-outlined aui-pull-right" tapmode onclick="do_like()"> <span class="aui-iconfont aui-icon-appreciate aui-text-primary"></span> 有幫助<i class='like_count'> {{=it.post_like}}</i> </div> </div> </script>   <script type="text/x-dot-template" id="commentT"> {{ for (var t = 0; t < it.length; t++){ }} <li class="aui-list-view-cell aui-img" tapmode onclick=""> <img class="aui-img-object aui-pull-left" src="{{=it[t].avatar}}"> <div class="aui-img-body"> {{=it[t].full_name}} <div class="aui-pull-right laud">  </div> <p class='aui-ellipsis-3'> {{=it[t].content}} </p> <p> {{=it[t].createtime}} </p> </div> </li> {{ }; }} </script>  <script type="text/x-dot-template" id="wcommentT"> <li class="aui-list-view-cell"> <a class="aui-arrow-right"> <span class="aui-badge">暫無評論</span> </a> </li> </script>  <script type="text/javascript"> apiready = function() { api.parseTapmode(); var tid = api.pageParam.tid; var pid = api.pageParam.pid; fnLoadPosts(tid); fnLoadComment(pid); } //文章內容 function fnLoadPosts(tid) { api.ajax({ url: 'http://www.sytest.com.cn/index.php?g=Osapp&m=Message&a=M_con', method: 'get', cache: true, timeout: 30, dataType: 'json', data: { values: { tid: tid } } }, function(ret, err) { if (ret) { fuUpdataPosts(ret); } }); } //加入文章內容 function fuUpdataPosts(data_){ var postsTText = $api.byId('postsT').text; var fnposts = doT.template(postsTText); var html = fnposts(data_); $api.dom('.main-content').innerHTML = html; } //獲取評論內容 function fnLoadComment(pid){ api.ajax({ url: 'http://www.sytest.com.cn/index.php?g=Osapp&m=Home&a=Health_comment', method: 'get', cache: true, timeout: 30, dataType: 'json', data: { values: { pid: pid } } },function(ret, err){ if (ret) { fnUpdataComment(ret); }else{ fnUpdataComment(); } }); } //加入評論內容 function fnUpdataComment(data_) { if (!data_) { var wcommentTText = $api.byId('wcommentT').text; var wfncomment = doT.template(wcommentTText); var html = wfncomment(data_); $api.dom('.aui-list-view').innerHTML = html; }else{ var commentTText = $api.byId('commentT').text; var fncomment = doT.template(commentTText); var html = fncomment(data_); ul = $api.dom('.aui-list-view'); $api.before(ul,html); } } //文章有幫助點贊 function do_like() { var pid = api.pageParam.pid; var uid = $api.getStorage('user').id; if (uid) { api.ajax({ url : 'http://www.sytest.com.cn/index.php?g=Osapp&m=Health&a=do_like', method : 'get', cache : true, timeout : 30, dataType : 'json', data : { values : { pid : pid, uid : uid, } } }, function(ret, err) { if (ret.msg == 1) { api.toast({ msg : '點贊+1' }); count = $api.dom('.like_count'); var value = parseInt($api.text(count)) + 1; $api.text(count, value); } else if (ret.msg == 0) { api.toast({ msg : '已贊' }); } else { api.toast({ msg : '點贊失敗' }); } }); } else { api.toast({ msg : '請先登陸' }); } } //文章收藏 function collect() { var pid = api.pageParam.pid; var uid = $api.getStorage('user').id; if (uid) { api.ajax({ url : 'http://www.sytest.com.cn/index.php?g=Osapp&m=Health&a=collect', method : 'get', cache : true, timeout : 30, dataType : 'json', data : { values : { pid : pid, uid : uid, } } }, function(ret, err) { if (ret.msg == 1) { api.toast({ msg : '收藏成功' }); } else if (ret.msg == 0) { api.toast({ msg : '您已經收藏過了' }); } else { api.toast({ msg : '收藏失敗' }); } }); } else { api.toast({ msg : '請先登陸' }); } } </script> </html> ~~~ > 效果如下 ![](https://box.kancloud.cn/058461c816aef14e340487da9ac90358_561x921.jpg)