用户评价(类似微信朋友圈，阿里用户评价)

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lp15203883326/article/details/84784239

效果图如下： 前端页面用的是jsp

    

jsp代码：

<c:if test="${applyCommentList.size()>0}">
        <div class="feedback-tittle-div"><div class="feedback-tittle-red"></div> <div class="feedback-tittle-text">用户试用评价</div></div>
        <ul class="feedback-comment-content">
            <c:forEach items="${applyCommentList}" var="item">
            <li class="feedback-comment-item-list">
                <div class="feedback-comment-appraise-item">
                    <div class="feedback-comment-user-head-div">
                        <c:choose>
                            <c:when test="${item.headImg!=null}">
                                <img src="${item.headImg}">
                            </c:when>
                            <c:otherwise>
                                <img src="http://images0.zaijiawan.com/wechat/ui/appraise_default0117.png@!ori">
                            </c:otherwise>
                        </c:choose>
                    </div>
                    <div class="feedback-comment-item-text-div">
                        <p class="feedback-comment-text-nickname">${item.name}</p>
                        <p class="feedback-comment-goods-text">${item.goodsName}</p>
                    </div>
                </div>
                <div class="feedback-comment-down-div">
                    <div class="feedback-comment-appraise-text">
                        ${item.comment}
                    </div>
                    <c:if test="${item.img != null and item.img != ''}">
                    <div class="feedback-comment-img-div">
                        <c:set value="${fn:split(item.img, ',') }" var="imgUrlArr" />
                        <c:forEach items="${imgUrlArr}" var="imgItem" varStatus="status" >
                            <c:if test="${status.index == 1 ||status.index == 4}">
                                <div class="feedback-comment-img-space">
                                    <img onclick="imgClick('${imgItem}','${item.img}','${status.index}')"
                                         src="${imgItem}@!rect214">
                                </div>
                            </c:if>
                            <c:if test="${status.index == 0 ||status.index ==2 ||status.index == 3 || status.index == 5}">
                                <div class="feedback-comment-img">
                                    <img onclick="imgClick('${imgItem}','${item.img}','${status.index}')"
                                         src="${imgItem}@!rect214">
                                </div>
                            </c:if>
                        </c:forEach>
                    </div>
                    </c:if>
                </div>
            </li>
            </c:forEach>
        </ul>
        <%--悬浮按钮--%>
        <div class="div-fixed-icon-top">
            <a href="#anchor-top" class="a-scroll-event">
                <img src="http://images0.zaijiawan.com/wechat/icon-top.png@!ori" alt="" class="img-fixed-icon-top">
            </a>
        </div>
        <div class="div-fixed-icon-comment">
            <a href="#anchor-comment" class="a-scroll-event">
                <img src="http://images0.zaijiawan.com/wechat/icon-comment.png@!ori" alt="" class="img-fixed-icon-comment">
            </a>
        </div>
    </c:if>

 css样式：

.feedback-comment-item-list {
    list-style-type: none;
}
.feedback-comment-content {

}
.feedback-comment-appraise-item {
    width: 100%;
    display: flex;
}


.feedback-comment-user-head-div {
    width: 45px;
    height: 45px;
    margin-right: 9px;
    border-radius: 50px;
    overflow: hidden;
    margin-top: 17px;
}
.feedback-comment-user-head-div img{
    width: 45px;
}
.feedback-comment-item-text-div {
    width: 87%;
}
.feedback-comment-text-nickname {
    height: 23px;
    font-size: 16px;
    font-weight: 400;
    color: rgba(51,51,51,1);
    line-height: 23px;
    margin-top: 18px;
}

.feedback-comment-appraise-text {
    font-size: 15px;
    color: #333333;
    line-height: 21px;
    margin-top: 8px;
}

.feedback-comment-appraise-text-hide{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}

.feedback-comment-open-div{
    margin-top: 8px;
}

.feedback-comment-a{
    font-size: 15px;
    font-weight: 400;
    color: rgba(255,105,105,1);
    line-height: 21px;
    letter-spacing: 1px;
}

.feedback-comment-a-img{
    width: 10px;
    margin-left: 3px;
}

.feedback-comment-a-stop{
    font-size: 15px;
    font-weight: 400;
    color: rgba(255,105,105,1);
    line-height: 21px;
    letter-spacing: 1px;
}
.feedback-comment-goods-text {
    height: 20px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(153,153,153,1);
    line-height: 20px;
}
.feedback-comment-img-div{
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.feedback-comment-img{
    width: 31.4%;
    background-color: #999999;
    margin-bottom: 10px;
    height: 0;
    padding-bottom: 31.4%;
}
.feedback-comment-img img{
    width: 100%;
    height: 0;
    height: auto;
}

.feedback-comment-img-space{
    width: 31.4%;
    padding-bottom: 31.4%;
    height: 0;
    background-color: #999999;
    margin-left: 8px;
    margin-right: 8px;
}


.feedback-comment-img-space img{
    width: 100%;
    height: auto;
}

.feedback-tittle-div {
    margin-top: 7px;
    display: flex;
    align-items: center;
    margin-left: -16px;
}

.feedback-tittle-red {
    background: #FF6969;
    height: 15px;
    width: 4px;
}

.feedback-tittle-text {
    font-size: 17px;
    font-weight: 500;
    color: #333333;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
}

相关js代码：用于展开／收起以及图片的原图放大翻看 

    function imgClick(imgUrl, imgList, index) {

        var imgTempArr = new Array();
        imgTempArr = imgList.split(',');
        var j = parseInt(index);
        var imgResultArr = new Array();
        for (var i = 0; i < imgTempArr.length; i++) {
            imgResultArr.push(imgTempArr[j]+'@!ori');
            j = j + 1;
            if (j == imgTempArr.length) {
                j = 0;
            }
        }
        wx.previewImage({
            current: imgUrl, // 当前显示图片的http链接
            urls: imgResultArr // 需要预览的图片http链接列表
        });
    }

 function showComment(obj) {
        var div = $(obj).parent().prev();
        // $(div).css({"height": "auto", "overflow": "auto"});
        $(div).removeClass("feedback-comment-appraise-text-hide");
        $(obj).removeAttr("onclick");
        $(obj).attr("onclick", "hideComment(this)");
        $(obj).text("收起");
        $(obj).next().remove();
    }

    function hideComment(obj) {
        var div =  $(obj).parent().prev();
        // $(div).css({"height":"180px","overflow":"hidden"});
        $(div).addClass("feedback-comment-appraise-text-hide");
        $(obj).removeAttr("onclick");
        $(obj).attr("onclick","showComment(this)");
        $(obj).text("展开");
    }

    // 展开
    $(function(){
        $(".feedback-comment-appraise-text").each(function(){
            var height = $(this).outerHeight(true);
            if(height < 180){
                $(this).css({"height":"auto"});
            }else{
                // $(this).css({"height": "180px","overflow":"hidden"});
                $(this).addClass("feedback-comment-appraise-text-hide");
                $(this).after("<div class=\"feedback-comment-open-div\"><span class=\"feedback-comment-a\" onclick='showComment(this)'>展开</span><img class=\"feedback-comment-a-img\" src=\"http://images0.zaijiawan.com/wechat/ui/open.png@!ori\"></div>\n");

            }
        })
    });