微信小程序消息评论动态样式教程下载

本文给大家带来的是微信小程序消息评论动态样式教程下载，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="page">
<view id="main">
    <view id="list">
        <view wx:for="{{list}}" wx:for-index="idx" wx:for-item="item" class="list_item">
            <view>
                <view class="po-avt-wrap">
                    <image class="po-avt data-avt" src="{{item.avatarUrl}}" ></image>
                </view>
                <view class="po-cmt">
                    <view class="po-hd">
                        <view class="po-name"><text class="data-name">{{item.nickName}}</text></view>
                        <view class="post">
                            <view>{{item.content}}</view>
                            <view>
                                <image wx:for="{{item.img}}" bindtap="previeimg" wx:for-item="res" class="list-img" data-name="{{idx}}" id="{{res}}" src="{{res}}" style="height: 80px;"></image>
                            </view>
                        </view>
                        <view class="time">{{item.time}}</view><image class="c-icon" id="{{idx}}" src="/img/c.png" bindtap="seecomment"></image>
                    </view>
                    <view class="r" wx:if="{{item.comments}}"></view>
                    <view class="cmt-wrap">
                        <view class="cmt-list">
                            <view wx:for="{{item.comments}}" bindtap="seecomment" id="{{idx}}" data-name="{{comment.nickName}}" wx:for-item="comment" hover-class="comment_hover" style="color:#000;">
                                <text>{{comment.nickName}}<text style="color:#000;margin:0px 2px;" wx:if="{{comment.reply}}">回复</text>{{comment.reply}}:</text>{{comment.content}}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>

</view>
<view class="add" bindtap="add">
<image src="/img/adddy.png"></image>
</view>

<view class="comment" wx:if="{{seecomment}}">
<input  bindconfirm="comment" bindblur="hidecomment" placeholder="{{reply}}" focus auto-height="true" fixed="true" cursor-spacing="10" confirm-type="done"/>
</view>
</view>

二、wxss样式文件代码如下：

#list,#list li,.po-hd,.post {
    overflow: hidden
}

.po-cmt,.post .list-img:nth-child(1),.time {
    float: left
}

#list li,.cmt-wrap,.r,.time {
    clear: both
}

#avt,#user-name {
    position: absolute
}

#bg {
    width: 100%
}

#user-name {
    text-align: right;
    right: 114px;
    bottom: 15px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-shadow: 0 1px .5px #000
}

#share a,.btn {
    font-size: 14px
}

.btn,b {
    font-weight: 400
}

#share a,#share p,.btn {
    text-align: center
}

#avt {
    width: 74px;
    height: 74px;
    border: 1px solid #dbdbdb;
    right: 15px;
    bottom: -22px;
    padding: 1px;
    background-color: #fff
}

#list li,.po-hd {
    position: relative
}


#list li {
    line-height: 1.5;
    border-bottom: 1px solid #e2e2e2;
    margin-top: 15px;
    padding-bottom: 15px
}

#share a:nth-child(2),.ads,.po-avt {
    position: absolute
}

.ads {
    color: #999;
    right: 5px;
    top: 0
}
.post view{color:#000}

.ads img {
    width: 10px;
    padding-left: 8px
}

.ad-link {
    color: #3b5384
}

.post .ad-link img {
    width: 11px;
    padding: 0;
    display: inline-block
}

.po-avt-wrap {
    padding-left: 10px
}

.po-avt {
    width: 40px;
    height: 40px;
    top: 0;
    left: 10px
}

.r {
    border-bottom: 8px solid #eee;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    width: 1px;
    margin-top: 5px;
    margin-left: 10px
}

.po-cmt {
    padding-left: 60px;
    padding-right: 10px;
    width: 100%;
    box-sizing: border-box
}

.po-name {
    color: #576b95
}

.post {
    color: #252525;
    padding-bottom: 10px
}

.post image {
    padding: 10px 5px 0 0;
    display: block;
    max-height: 130px;
    max-width: 130px
}


.post .list-img {
    width: 30%;
    max-height: 80px;
    max-width: 80px;
    padding-right: 5px;
    float: left;
    object-fit: cover
}

.post .list-img:last-child {
    padding-right: 0
}

.time {
    color: #b1b1b1;
    font-size: .7rem;
}

.c-icon {
    width: 20px;
    height: 14px;
    float: right
}

.cmt-wrap {
    width: 100%;
    background-color: #eee
}

.like {
    color: #576b95;
    padding: 5px 5px 3px 12px
}

.like image {
    width: 12px;
    padding-right: 5px
}

.cmt-list {
    color: #454545
}

.cmt-list view {
    padding-top: 3px;
    border-bottom: 1px solid #eee;
    padding: 5px 12px;
}

.cmt-list text {
    color: #3b5384
}

.list_item{margin:10px 0px;border-bottom:1px solid #eee;overflow:hidden;padding:10px 0px;position:relative}

.add{position: fixed;bottom: 30px;right:30px;}
.add image{width: 80rpx;height: 80rpx;}

.comment{position: fixed;bottom:0;z-index:100000;background:#f5f5f5;width:100%;}
.comment input{width:90%;margin:5px 5%;background: #fff;border:1px solid #eee;padding:10rpx;}
.comment_hover{background:#eee;}

三、js页面代码如下：

var app = getApp();
var util = require('../../utils/util.js'); 
var page = 1;
Page({
  data:{
    seecomment:false,
    reply:''
  },
  add:function(){
    wx.navigateTo({
      url: '/pages/dynamic/add'
    })
  },
  previeimg:function(e){
    var that = this;
    console.log(e);
    wx.previewImage({
      current: e.currentTarget.id, 
      urls: that.data.list[e.currentTarget.dataset.name].img 
    })
  },
  getList:function(){
    var that = this;
     util.req('dynamic/getlist',{page:page},function(data){
        var list = data.list;
        if (page == 1) {
          var arr = new Array();
        }else{
          var arr = that.data.list;
        }

        list.forEach(function(item){
          var li = {
            avatarUrl:item.avatarUrl,
            content:item.content,
            id:item.id,
            img:JSON.parse(item.img),
            nickName:item.nickName,
            time:util.getDateBiff(item.time*1000),
            zan:item.zan,
            comments: item.comment
          }
          arr.push(li);
        })
        that.setData({list:arr});
     })
  },
  onShow:function(options){
    this.getList();
  },
  onReachBottom:function(){
    if(!this.data.nomore){
      page++;
      this.getList();
    }
  },
  seecomment:function(e){
    console.log(e);
    var reply = (!e.target.dataset.name)?'':'回复'+e.target.dataset.name;
    this.setData({
      'reply':reply,
      'seecomment':true,
      'nowid':e.currentTarget.id
    });
  },
  comment:function(e){
    var that = this;
    var content = e.detail.value;
    if(content == ''){
      return false;
    }
    util.req('comment/add',{
      'iid':that.data.list[that.data.nowid].id,
      'reply':(that.data.reply).replace('回复',''),
      'type':'dynamic',
      'content':e.detail.value,
      'sk':app.globalData.sk
      },function(data){
      if(data.status == 1){
        var list = that.data.list;
        list[that.data.nowid].comments = (list[that.data.nowid].comments) ? list[that.data.nowid].comments:(new Array());
        list[that.data.nowid].comments.unshift({id: data.id, iid: that.data.list[that.data.nowid].id, content: e.detail.value, nickName: app.globalData.userInfo.nickName,reply:(that.data.reply).replace('回复','')})
      }
      that.setData({list:list});
    })
  },
  hidecomment:function(){
    this.setData({'seecomment':false});
  },
  onPullDownRefresh: function(){
    page = 1;
    this.getList();
    wx.stopPullDownRefresh();
  }
})

模板简介：该模板名称为【微信小程序消息评论动态样式教程下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。