內容頁-評論列表 · ThinkPHP模塊兒

# 評論列表在 [文章頁](http://http://hongweizhiyuan.oschina.io/newthink_tpl/tpl/AUI/AUI2.1/module_article/article2.html) 這個鏈接中，我們可以看到，里邊即有評論列表，其關鍵代碼如下： ```  <div style="background:#f5f5f5;width:100%;line-height:2rem;padding-left:0.75rem;" name="comment_list" id="comment_list">評論</div> <div class="aui-content aui-margin-b-15"> <ul class="aui-list aui-media-list" style="margin-bottom:3.4rem;">  <li class="aui-list-item"> <div class="aui-media-list-item-inner"> <div class="aui-list-item-media" style="width: 3rem;"> <img src="images/head.png" class="aui-img-round aui-list-img-sm"> </div> <div class="aui-list-item-inner"> <div class="aui-list-item-text"> <div class="aui-list-item-title aui-font-size-14">故事仍在繼續</div> <div><i class="aui-iconfont aui-icon-laud"></i>8</div> </div> <div class="aui-ellipsis-2 aui-font-size-14" style="color:#999;"> 很贊的文章，炒雞稀飯，這篇文章的作者還真是一個性情中人啊！大家說一說是不是啊！！大家說一說是不是啊！！大家說一說是不是啊！！大家說一說是不是啊！ </div> <div class="aui-info"> 2016-10-6 10:00 </div> </div> </div> </li>   <li class="aui-list-item"> <div class="aui-media-list-item-inner"> <div class="aui-list-item-media" style="width: 3rem;"> <img src="images/head.png" class="aui-img-round aui-list-img-sm"> </div> <div class="aui-list-item-inner"> <div class="aui-list-item-text"> <div class="aui-list-item-title aui-font-size-14">故事仍在繼續</div> <div><i class="aui-iconfont aui-icon-laud"></i>8</div> </div> <div class="aui-ellipsis-2 aui-font-size-14" style="color:#999;"> 很贊的文章，炒雞稀飯，這篇文章的作者還真是一個性情中人啊！大家說一說是不是啊！！大家說一說是不是啊！！大家說一說是不是啊！！大家說一說是不是啊！ </div> <div class="aui-info"> 2016-10-6 10:00 </div> </div> </div> </li>   <li class="aui-list-item"> <div class="aui-media-list-item-inner"> <div class="aui-list-item-media" style="width: 3rem;"> <img src="images/head.png" class="aui-img-round aui-list-img-sm"> </div> <div class="aui-list-item-inner"> <div class="aui-list-item-text"> <div class="aui-list-item-title aui-font-size-14">故事仍在繼續</div> <div><i class="aui-iconfont aui-icon-laud"></i>8</div> </div> <div class="aui-ellipsis-2 aui-font-size-14" style="color:#999;"> 很贊的文章，炒雞稀飯，這篇文章的作者還真是一個性情中人啊！大家說一說是不是啊！！大家說一說是不是啊！！大家說一說是不是啊！！大家說一說是不是啊！ </div> <div class="aui-info"> 2016-10-6 10:00 </div> </div> </div> </li>   <li class="aui-list-item"> <div class="aui-media-list-item-inner"> <div class="aui-list-item-media" style="width: 3rem;"> <img src="images/head.png" class="aui-img-round aui-list-img-sm"> </div> <div class="aui-list-item-inner"> <div class="aui-list-item-text"> <div class="aui-list-item-title aui-font-size-14">故事仍在繼續</div> <div><i class="aui-iconfont aui-icon-laud"></i>8</div> </div> <div class="aui-ellipsis-2 aui-font-size-14" style="color:#999;"> 很贊的文章，炒雞稀飯，這篇文章的作者還真是一個性情中人啊！大家說一說是不是啊！！大家說一說是不是啊！！大家說一說是不是啊！！大家說一說是不是啊！ </div> <div class="aui-info"> 2016-10-6 10:00 </div> </div> </div> </li>   <li class="aui-list-item"> <div class="aui-media-list-item-inner"> <div class="aui-list-item-media" style="width: 3rem;"> <img src="images/head.png" class="aui-img-round aui-list-img-sm"> </div> <div class="aui-list-item-inner"> <div class="aui-list-item-text"> <div class="aui-list-item-title aui-font-size-14">故事仍在繼續</div> <div><i class="aui-iconfont aui-icon-laud"></i>8</div> </div> <div class="aui-ellipsis-2 aui-font-size-14" style="color:#999;"> 很贊的文章，炒雞稀飯，這篇文章的作者還真是一個性情中人啊！大家說一說是不是啊！！大家說一說是不是啊！！大家說一說是不是啊！！大家說一說是不是啊！ </div> <div class="aui-info"> 2016-10-6 10:00 </div> </div> </div> </li>   <li class="aui-list-item"> <div class="aui-media-list-item-inner"> <div class="aui-list-item-media" style="width: 3rem;"> <img src="images/head.png" class="aui-img-round aui-list-img-sm"> </div> <div class="aui-list-item-inner"> <div class="aui-list-item-text"> <div class="aui-list-item-title aui-font-size-14">故事仍在繼續</div> <div><i class="aui-iconfont aui-icon-laud"></i>8</div> </div> <div class="aui-ellipsis-2 aui-font-size-14" style="color:#999;"> 很贊的文章，炒雞稀飯，這篇文章的作者還真是一個性情中人啊！大家說一說是不是啊！！大家說一說是不是啊！！大家說一說是不是啊！！大家說一說是不是啊！ </div> <div class="aui-info"> 2016-10-6 10:00 </div> </div> </div> </li>   <li class="aui-list-item"> <div class="aui-media-list-item-inner"> <div class="aui-list-item-media" style="width: 3rem;"> <img src="images/head.png" class="aui-img-round aui-list-img-sm"> </div> <div class="aui-list-item-inner"> <div class="aui-list-item-text"> <div class="aui-list-item-title aui-font-size-14">故事仍在繼續</div> <div><i class="aui-iconfont aui-icon-laud"></i>8</div> </div> <div class="aui-ellipsis-2 aui-font-size-14" style="color:#999;"> 很贊的文章，炒雞稀飯，這篇文章的作者還真是一個性情中人啊！大家說一說是不是啊！！大家說一說是不是啊！！大家說一說是不是啊！！大家說一說是不是啊！ </div> <div class="aui-info"> 2016-10-6 10:00 </div> </div> </div> </li>  </ul> </div>  ``` 哇塞塞，好長啊！其實沒有那么長了，都是重復的，為了好看，才這么放的！ ## 方法及步驟我們將采用以下三種方法來實現！是不是很簡單呢？和評論列表幾乎是一樣一樣的！只不過API不一樣，為了方便開發，我還是把步驟以及代碼貼出來吧！ >1、去掉內容中間的內容，并賦ID值 2、引用doT.js并加入script模板 3、用js調用遠程api并賦值 ### 第1步：去掉內容中間的內容，并賦ID值操作后，我們就剩下了： ```  <div style="background:#f5f5f5;width:100%;line-height:2rem;padding-left:0.75rem;" name="comment_list" id="comment_list">評論</div> <div class="aui-content aui-margin-b-15"> <ul class="aui-list aui-media-list" style="margin-bottom:3.4rem;" id="user_comment_html"> </ul> </div>  ``` ### 第2步：引用doT.js并加入script模板操作后下的相關代碼，其實就是把中間的一些重復的代碼放到中間，再把沒有代碼的加個界面崦已！ ``` <script type="text/javascript" src="../../../script/assets/doT.min.js"></script>  <script id="user_comment_script" type="text/x-dot-template" > {{ for (var i = 0; i< it.length; i++){ }} <li class="aui-list-item"> <div class="aui-media-list-item-inner"> <div class="aui-list-item-media" style="width: 3rem;"> <img src="{{=it[i].avatar}}" class="aui-img-round aui-list-img-sm"> </div> <div class="aui-list-item-inner"> <div class="aui-list-item-text"> <div class="aui-list-item-title aui-font-size-14">{{=it[i].full_name}}</div> </div> <div class="aui-ellipsis-2 aui-font-size-14" style="color:#999;"> {{=it[i].content}} </div> <div class="aui-info"> {{=it[i].createtime}} </div> </div> </div> </li> {{ } }} </script>  <script id="user_comment_null_script" type="text/x-dot-template" > <li class="aui-list-item"> <div class="aui-list-item-text"> 暫無評論 </div> </li> </script> ``` ### 第3步：用js調用遠程api并賦值至于相關的set_doT函數和 r_ajax ，可擊 [APP函數](http://http://www.hmoore.net/hongweizhiyuan/apicloud_function/268940) 這個鏈接就可以查看到！ ``` //文章評論 20條 function user_comment(){ let object_id = api.pageParam.object_id; let serverURL = Config.api.User_Article_Comment; let data = {values:{post_id:object_id}}; let callback = function(ret){ if(ret.data.status == 1){ set_doT(ret.data.info, 'user_comment_script', 'user_comment_html',true); }else{ set_doT(ret.data.info, 'user_comment_null_script', 'user_comment_html',true); } } r_ajax(serverURL,data,callback); } ``` ### 第4步：在apiready中加入函數代碼如下： ``` apiready = function() { user_comment(); //文章評論 }; ``` ## 定位列表的錨點？ ```  <div class="aui-bar-tab-item" id="userComment" tapmode style="width: 2.2rem;" > <i class="aui-iconfont aui-icon-comment" onclick="ancho('comment_list');"></i> </div> ``` 相關函數： ``` //onclick錨點定位 function ancho(num) { let url = window.location.href.substr(0, window.location.href.indexOf("#")); window.location.href = url + '#' + num; } ``` # 全部代碼如下： ```  <div style="background:#f5f5f5;width:100%;line-height:2rem;padding-left:0.75rem;" name="comment_list" id="comment_list">評論</div> <div class="aui-content aui-margin-b-15"> <ul class="aui-list aui-media-list" style="margin-bottom:3.4rem;" id="user_comment_html"> </ul> </div>   <div class="aui-bar-tab-item" id="userComment" tapmode style="width: 2.2rem;" > <i class="aui-iconfont aui-icon-comment" onclick="ancho('comment_list');"></i> </div> <script type="text/javascript" src="../../../script/assets/doT.min.js"></script>  <script id="user_comment_script" type="text/x-dot-template" > {{ for (var i = 0; i< it.length; i++){ }} <li class="aui-list-item"> <div class="aui-media-list-item-inner"> <div class="aui-list-item-media" style="width: 3rem;"> <img src="{{=it[i].avatar}}" class="aui-img-round aui-list-img-sm"> </div> <div class="aui-list-item-inner"> <div class="aui-list-item-text"> <div class="aui-list-item-title aui-font-size-14">{{=it[i].full_name}}</div> </div> <div class="aui-ellipsis-2 aui-font-size-14" style="color:#999;"> {{=it[i].content}} </div> <div class="aui-info"> {{=it[i].createtime}} </div> </div> </div> </li> {{ } }} </script>  <script id="user_comment_null_script" type="text/x-dot-template" > <li class="aui-list-item"> <div class="aui-list-item-text"> 暫無評論 </div> </li> </script> <script> apiready = function() { user_comment(); //文章評論 }; //文章評論 20條 function user_comment(){ let object_id = api.pageParam.object_id; let serverURL = Config.api.User_Article_Comment; let data = {values:{post_id:object_id}}; let callback = function(ret){ if(ret.data.status == 1){ set_doT(ret.data.info, 'user_comment_script', 'user_comment_html',true); }else{ set_doT(ret.data.info, 'user_comment_null_script', 'user_comment_html',true); } } r_ajax(serverURL,data,callback); } //onclick錨點定位 function ancho(num) { let url = window.location.href.substr(0, window.location.href.indexOf("#")); window.location.href = url + '#' + num; } </script> ```