Comment评论列表

2025-04-16 10:06:33首发，17秒前更新

comment列表由纯css定义，可集成到任意组件或模块；支持多终端自适应。

前言

由于评论板块的内容复杂性，不适合封装模块或组件，本框架使用css定义好了一套评论列表布局，支持多终端自适应，可应用到任意组件或模块。

基本嵌套结构如下：

                
                     <div class="_comment">
                        <div class="_comment-head"></div>
                        <div class="_comment-body">
                            <!--主评-->
                            <div class="_comment-item">
                                <div class="_comment-wrap">
                                    <div class="_comment-left"></div>
                                    <div class="_comment-right">
                                        <!--跟评-->
                                        <div class="_comment-item"></div>
                                        <div class="_comment-item"></div>
                                        <div class="_comment-item"></div>
                                        <div class="_comment-more"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="_comment-item"></div>
                        </div>
                        <div class="_comment-foot"></div>
                    </div>

一条评论

通过创建一条评论，观察评论中所使用的节点元素。

输出
HTML

宋健

1楼

总体上说，对得起五大流氓的身份，个人认为综合实力能排第二。具体到小的方面，全球国家总数200个左右，中国各方面大部分都能在世界前5，前2的也不少。

10小时前广东

12
```
                
                
            
```

嵌套评论

_comment-item表示一条主评论，如果需要显示跟评，可将新的_comment-item标签置于_comment-item > _comment-right标签的尾部。

本例用js模拟插入嵌套评论。

输出
HTML
JS

```
                
                
            
```

                
                let item = ax.createEl('div',{class:'_comment-item'},`
                            <div class="_comment-wrap">
                                <div class="_comment-left">
                                    <a href="###" rep="disk"><img src="https://unpkg.com/@codady/resource/image/avatar01.jpg" /></a>
                                </div>
                                <div class="_comment-right">
                                    <div class="_comment-author">
                                        <div class="_comment-left"><a href="###" rep="name">宋健</a></div>
                                        <div class="_comment-right"><span>1楼</span></div>
                                    </div>
                                    <div class="_comment-cont">
                                        总体上说，对得起五大流氓的身份，个人认为综合实力能排第二。具体到小的方面，全球国家总数200个左右，中国各方面大部分都能在世界前5，前2的也不少。
                                    </div>
                                    <div class="_comment-byline">
                                        <div class="_comment-left"><span>10小时前</span><span>广东</span></div>
                                        <div class="_comment-right"><span><i class="_icon-heart"></i> 12</span></div>
                                    </div>
                                </div>
                            </div>
                `);
                let fragment = document.createDocumentFragment();
                let demo0001 = document.querySelector('#demo0001');
                let str = '';
                for(let i=0;i<3;i++){
                    let copy = item.cloneNode(true),
                        right = copy.querySelector('._comment-right');
                    for(let j=0;j<2;j++){
                        right.appendChild(item.cloneNode(true));
                    }
                    fragment.appendChild(copy);
                }
                demo0001.appendChild(fragment);

头像类型

头像有以下几种构成方式：

使用ax-avatar组件，通过src属性更换头像，可使用ax-avatar组件的所有属性。
使用rep=disk节点，插入img标签，头像为原型
使用rep=cube节点，插入img标签，头像为方形。
使用rep=image节点，插入img标签，头像图片只保持宽度，高度自由拉伸。
使用rep=disk节点和rep=cube节点，同时使用style插入背景图片。

附加说明，var(--_avatar)变量是框架自带的默认头像，可以background-image属性的形式使用。

输出
HTML

宋健

1楼

总体上说，对得起五大流氓的身份，个人认为综合实力能排第二。具体到小的方面，全球国家总数200个左右，中国各方面大部分都能在世界前5，前2的也不少。

10小时前广东

12

宋健

1楼

总体上说，对得起五大流氓的身份，个人认为综合实力能排第二。具体到小的方面，全球国家总数200个左右，中国各方面大部分都能在世界前5，前2的也不少。

10小时前广东

12

宋健

1楼

总体上说，对得起五大流氓的身份，个人认为综合实力能排第二。具体到小的方面，全球国家总数200个左右，中国各方面大部分都能在世界前5，前2的也不少。

10小时前广东

12

宋健

1楼

总体上说，对得起五大流氓的身份，个人认为综合实力能排第二。具体到小的方面，全球国家总数200个左右，中国各方面大部分都能在世界前5，前2的也不少。

10小时前广东

12
```
                
                
            
```

头像允许为空，主评会因为没有头像而向左塌陷，跟评则不会塌陷，以确保区分主评和跟评的关系。

输出
HTML

宋健

1楼

总体上说，对得起五大流氓的身份，个人认为综合实力能排第二。具体到小的方面，全球国家总数200个左右，中国各方面大部分都能在世界前5，前2的也不少。

10小时前广东

12

宋健

1楼

总体上说，对得起五大流氓的身份，个人认为综合实力能排第二。具体到小的方面，全球国家总数200个左右，中国各方面大部分都能在世界前5，前2的也不少。

10小时前广东

12

宋健

1楼

总体上说，对得起五大流氓的身份，个人认为综合实力能排第二。具体到小的方面，全球国家总数200个左右，中国各方面大部分都能在世界前5，前2的也不少。

10小时前广东

12

宋健

1楼

总体上说，对得起五大流氓的身份，个人认为综合实力能排第二。具体到小的方面，全球国家总数200个左右，中国各方面大部分都能在世界前5，前2的也不少。

10小时前广东

12
```
                
                
            
```

点缀

可以在内容周围使用各种小元素点缀。

输出
HTML

宋健

总体上说，对得起五大流氓的身份，个人认为综合实力能排第二。具体到小的方面，全球国家总数200个左右，中国各方面大部分都能在世界前5，前2的也不少。

10小时前广东回复

12

宋健

举报

总体上说，对得起五大流氓的身份，个人认为综合实力能排第二。具体到小的方面，全球国家总数200个左右，中国各方面大部分都能在世界前5，前2的也不少。

10小时前广东

12 8

宋健

1楼

回复张总：总体上说，对得起五大流氓的身份，个人认为综合实力能排第二。具体到小的方面，全球国家总数200个左右，中国各方面大部分都能在世界前5，前2的也不少。

10小时前广东

12
```
                
                
            
```

多媒体内容

_comment-cont节点用来存放评论正文，除了纯文本，还支持颜文字、img、video、audio、picture、svg、iframe等多媒体标签

输出
HTML

宋健

总体上说，对得起五大流氓的身份，个人认为综合实力能排第二。具体到小的方面，全球国家总数200个左右，中国各方面大部分都能在世界前5，前2的也不少。(╯°□°）╯︵ ┻━┻

10小时前广东回复

12

宋健

总体上说，对得起五大流氓的身份，个人认为综合实力能排第二。具体到小的方面，全球国家总数200个左右，中国各方面大部分都能在世界前5，前2的也不少。

10小时前广东回复

12

宋健

总体上说，对得起五大流氓的身份，个人认为综合实力能排第二。具体到小的方面，全球国家总数200个左右，中国各方面大部分都能在世界前5，前2的也不少。

10小时前广东回复

12

宋健

总体上说，对得起五大流氓的身份，个人认为综合实力能排第二。具体到小的方面，全球国家总数200个左右，中国各方面大部分都能在世界前5，前2的也不少。

10小时前广东回复

12
```
                
                
            
```

使用分隔线

如果需要对主评使用分隔线，可对_comment标签追加dividable属性，跟评没有分隔线。

输出
HTML
JS

```
                
                
            
```

                
                let item = ax.createEl('div',{class:'_comment-item'},`
                            <div class="_comment-wrap">
                                <div class="_comment-left">
                                    <a href="###" rep="disk"><img src="https://unpkg.com/@codady/resource/image/avatar01.jpg" /></a>
                                </div>
                                <div class="_comment-right">
                                    <div class="_comment-author">
                                        <div class="_comment-left"><a href="###" rep="name">宋健</a></div>
                                        <div class="_comment-right"><span>1楼</span></div>
                                    </div>
                                    <div class="_comment-cont">
                                        总体上说，对得起五大流氓的身份，个人认为综合实力能排第二。具体到小的方面，全球国家总数200个左右，中国各方面大部分都能在世界前5，前2的也不少。
                                    </div>
                                    <div class="_comment-byline">
                                        <div class="_comment-left"><span>10小时前</span><span>广东</span></div>
                                        <div class="_comment-right"><span><i class="_icon-heart"></i> 12</span></div>
                                    </div>
                                </div>
                            </div>
                `);
                let fragment = document.createDocumentFragment();
                let demo0001 = document.querySelector('#demo0002');
                let str = '';
                for(let i=0;i<3;i++){
                    let copy = item.cloneNode(true),
                        right = copy.querySelector('._comment-right');
                    for(let j=0;j<2;j++){
                        right.appendChild(item.cloneNode(true));
                    }
                    fragment.appendChild(copy);
                }
                demo0001.appendChild(fragment);

另外一种使用分隔线的方式，是在_comment-item标签头部或尾部追加_comment-br标签。

输出
HTML
JS

```
                
                
            
```

                
                let item = ax.createEl('div',{class:'_comment-item'},`
                            <div class="_comment-br"></div>
                            <div class="_comment-wrap">
                                <div class="_comment-left">
                                    <a href="###" rep="disk"><img src="https://unpkg.com/@codady/resource/image/avatar01.jpg" /></a>
                                </div>
                                <div class="_comment-right">
                                    <div class="_comment-author">
                                        <div class="_comment-left"><a href="###" rep="name">宋健</a></div>
                                        <div class="_comment-right"><span>1楼</span></div>
                                    </div>
                                    <div class="_comment-cont">
                                        总体上说，对得起五大流氓的身份，个人认为综合实力能排第二。具体到小的方面，全球国家总数200个左右，中国各方面大部分都能在世界前5，前2的也不少。
                                    </div>
                                    <div class="_comment-byline">
                                        <div class="_comment-left"><span>10小时前</span><span>广东</span></div>
                                        <div class="_comment-right"><span><i class="_icon-heart"></i> 12</span></div>
                                    </div>
                                </div>
                            </div>
                `);
                let fragment = document.createDocumentFragment();
                let demo0001 = document.querySelector('#demo0003');
                let str = '';
                for(let i=0;i<3;i++){
                    let copy = item.cloneNode(true),
                        right = copy.querySelector('._comment-right');
                    for(let j=0;j<2;j++){
                        right.appendChild(item.cloneNode(true));
                    }
                    fragment.appendChild(copy);
                }
                demo0001.appendChild(fragment);

查看更多

当主评或跟评过多的时候，通常会折叠评论，此时需要显示一个查看更多的按钮，用_comment-more表示更多按钮。置于_comment-item>_comment-right>底部。

输出
HTML
JS

```
                
                
            
```

                
                let item = ax.createEl('div',{class:'_comment-item'},`
                            <div class="_comment-wrap">
                                <div class="_comment-left">
                                    <a href="###" rep="disk"><img src="https://unpkg.com/@codady/resource/image/avatar01.jpg" /></a>
                                </div>
                                <div class="_comment-right">
                                    <div class="_comment-author">
                                        <div class="_comment-left"><a href="###" rep="name">宋健</a></div>
                                        <div class="_comment-right"><span>1楼</span></div>
                                    </div>
                                    <div class="_comment-cont">
                                        总体上说，对得起五大流氓的身份，个人认为综合实力能排第二。具体到小的方面，全球国家总数200个左右，中国各方面大部分都能在世界前5，前2的也不少。
                                    </div>
                                    <div class="_comment-byline">
                                        <div class="_comment-left"><span>10小时前</span><span>广东</span></div>
                                        <div class="_comment-right"><span><i class="_icon-heart"></i> 12</span></div>
                                    </div>
                                </div>
                            </div>
                `);
                let more = ax.createEl('div',{class:'_comment-more'},`<a href="##">查看更多</a>`);
                let fragment = document.createDocumentFragment();
                let demo0001 = document.querySelector('#demo0004');
                let str = '';
                for(let i=0;i<3;i++){
                    let copy = item.cloneNode(true),
                        right = copy.querySelector('._comment-right');
                    for(let j=0;j<2;j++){
                        right.appendChild(item.cloneNode(true));
                    }
                    right.appendChild(more.cloneNode(true));
                    fragment.appendChild(copy);
                }
                demo0001.appendChild(fragment);