# 評論列表
在 [文章頁](http://http://hongweizhiyuan.oschina.io/newthink_tpl/tpl/AUI/AUI2.1/module_article/article2.html) 這個鏈接中,我們可以看到,里邊即有 評論列表,其關鍵代碼如下:
```
<!--評論列表/start-->
<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;">
<!--start-->
<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>
<!--end-->
<!--start-->
<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>
<!--end-->
<!--start-->
<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>
<!--end-->
<!--start-->
<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>
<!--end-->
<!--start-->
<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>
<!--end-->
<!--start-->
<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>
<!--end-->
<!--start-->
<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>
<!--end-->
</ul>
</div>
<!--評論列表/end-->
```
哇塞塞,好長啊!其實沒有那么長了,都是重復的,為了好看,才這么放的!
## 方法及步驟
我們將采用以下三種方法來實現!是不是很簡單呢?和評論列表幾乎是一樣一樣的!只不過API不一樣,為了方便開發,我還是把步驟以及代碼貼出來吧!
>1、去掉內容中間的內容,并賦ID值
2、引用doT.js并加入script模板
3、用js調用遠程api并賦值
### 第1步:去掉內容中間的內容,并賦ID值
操作后,我們就剩下了:
```
<!--評論列表/start-->
<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>
<!--評論列表/end-->
```
### 第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;
}
```
# 全部代碼如下:
```
<!--評論列表/start-->
<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>
<!--評論列表/end-->
<!--評論圖標,點進去是列表-->
<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>
```