微信小程序---评论功能实现

index.wxml:

提交评论：

    <!-- 评论 --><!--textarea--><view class="message"><form bindsubmit="formSubmit" class='form'><input type="text" name="liuyantext" placeholder='留下你精彩的评论吧' value='{{keyValue}}' class="input-style" /><button formType="submit" class="btn">发送</button><input type="text" name="nickname" value='{{videoid}}' style="display:none;" /><input type="text" name="headimg" value='{{avatarUrl}}' style="display:none;" /></form></view>

显示全部评论：

    <view class='allMessage'><view class="title"><text>全部评论</text></view><view class='tab-content'><view class='comment-list'><!-- 提交评论显示 --><view class='comment-item' class="{{showOrHidden?'show':'hide'}}" style='width: 100%;height: auto;overflow: hidden;padding: 16px 0;border-bottom: 1px solid #f3f3f5;'><view class='comment-person'><image class='comment-person-avatar' src='{{photo2}}'></image><view class='comment-person-info ellipsis'><view class='comment-person-name ellipsis'>{{nickname2}}</view><view class='comment-time ellipsis'>{{date2}}</view></view></view><view class='comment-text'>{{comment2}}</view></view><!-- 读取数据显示全部评论 --><view class='comment-item' wx:for="{{comment}}" wx:key="{{item.id}}"><view class='comment-person'><image class='comment-person-avatar' src='{{item.photo}}'></image><view class='comment-person-info ellipsis'><view class='comment-person-name ellipsis'>{{item.nickname}}</view><view class='comment-time ellipsis'>{{item.created_at}}</view></view></view><view class='comment-text'>{{item.content}}</view></view></view></view></view>

index.wxss:

提交评论样式：

.form{width: 94%;margin:0 auto;
}
.input-style{width: 70%;height: 40px;border-radius: 25px;background: #f3f3f5;font-size: 14px;/* text-indent: 15px; */padding-left: 15px;float: left;color:#808286;
}.btn{width: 20%;font-size: 14px;float: right;border-radius: 10px;color: #2c3036;background: #f3f3f5;letter-spacing: 2px;
}.liuyanview{width: 90%;margin: 10px auto;
}.result{text-align: center;font-size: 14px;color: #f00;margin-top: 20px;
}.headimg{width: 45px;height: 45px;border-radius: 100%;
}.headimg image{width: 45px;height: 45px;border-radius: 100%;
}.nickname_liuyantext{width: calc(100% - 55px);float: right;margin-top:-45px;
}.nickname_liuyantext .nickname{font-size: 15px;color: #999;
}.nickname_liuyantext .nickname .time{font-size: 11px;color: #999;float: right;
}.nickname_liuyantext .text{font-size: 16px;color: #666;
}.message{width: 100%;height: 50px;display: flex;padding: 10px auto;background-color: #fff;position: fixed;bottom:0;
}

显示全部评论样式：

/* 全部评论 */
.allMessage {clear: both;width: 92%;margin: 0 auto;padding: 4%;background-color: #fff;padding-bottom: 120rpx;
}.allMessage .title {border-left: 5px solid #2c3036;/* margin: 12px 0; */height: 20px;line-height: 20px;text-indent: 10px;color: #2c3036;font-size: 18px;margin-bottom: 10px;
}.comment-item {width: 100%;height: auto;overflow: hidden;padding: 16px 0;border-bottom: 1px solid #f3f3f5;
}.comment-person {display: flex;align-items: center;
}.comment-person-avatar {width: 42px;height: 42px;border-radius: 21px;margin: 0 10px 0 0;flex: 0 0 42px;
}.comment-person-info {flex: 1;
}.comment-person-name {font-size: 16px;font-weight: 800;color: #2c3036;
}.comment-time {font-size: 13px;color: #808286;
}.comment-text {font-size: 14px;color: #2c3036;line-height: 25px;padding: 24rpx 0 0 20px;
}.goods-box .goods-thumb {width: 300rpx;height: 300rpx;margin: 35rpx 0 125rpx;
}.to-carts-icon {position: absolute;right: 70rpx;top: 70rpx;width: 10rpx;height: 10rpx;border-radius: 50%;opacity: 0.6;-webkit-animation: to_cart 0.3s ease-out;animation: to_cart 0.3s ease-out;
}@-webkit-keyframes to_cart {0% {right: 100rpx;top: 530rpx;-webkit-transform: scale(4);}/*60%{top: 20rpx;}*/
}@keyframes to_cart {0% {right: 100rpx;top: 530rpx;transform: scale(4);}/*60%{top: 20rpx;}*/
}.carts-icon {position: absolute;right: 40rpx;top: 40rpx;width: 75rpx;height: 75rpx;
}.carts-icon image {width: 100%;height: 100%;
}.carts-icon.on {-webkit-animation: to_cart_scale 0.3s ease;animation: to_cart_scale 0.3s ease;
}@-webkit-keyframes to_cart_scale {50% {-webkit-transform: scale(1.2);}
}@keyframes to_cart_scale {50% {transform: scale(1.2);}
}.carts-icon-num {position: absolute;left: -15rpx;width: 40rpx;height: 40rpx;line-height: 40rpx;border-radius: 50%;background: #ab956d;color: #fff;font-size: 24rpx;
}.goods-box .goods-operation {position: relative;width: 100%;height: 100rpx;line-height: 100rpx;padding: 0 50rpx;margin-bottom: 60rpx;box-sizing: border-box;border-radius: 50rpx;background: #76b44e;color: #fff;font-size: 28rpx;
}.goods-operation text {display: inline-block;height: 100rpx;
}.goods-operation-num {width: 160rpx;
}.goods-operation-add {width: 80rpx;margin-right: 30rpx;
}.goods-to-cart {width: 210rpx;padding-right: 75rpx;
}.goods-cart-img {position: absolute;right: 50rpx;top: 28rpx;width: 45rpx;height: 45rpx;
}.goods-stock {font-size: 28rpx;margin-bottom: 20rpx;
}.goods-price {font-size: 40rpx;
}.goods-tab-nav {display: inline-block;width: 33.33%;height: 90rpx;line-height: 90rpx;border-bottom: 1rpx solid #ededed;box-sizing: border-box;text-align: center;color: #c7c7cb;
}.goods-tab-nav.on {color: #bcaa8a;border-bottom: 5rpx solid #bcaa8a;
}.goods-content {padding: 40rpx;font-size: 13px;
}button::after {border: none;
}button {background: none;
}.shareMain {width: 100%;margin: 30px 0;
}.shareMain .mainList {overflow: hidden;margin: 0 auto;text-align: center;
}.shareMain .title {margin: 0 auto;text-align: center;font-size: 13px;margin-top: -13px;
}

js：

  formSubmit: function(e) {console.log(app.globalData.userInfo.nickName);wx.showToast({title: '评论成功',icon: 'success',duration: 3000})var that = this;var liuyantext = e.detail.value.liuyantext; //获取表单所有name=liuyantext的值 console.log('视频id' + that.data.id);console.log('留言number:' + that.data.number);wx.request({url: 'https://xxxx/comment',data: {content: liuyantext,number: that.data.number,id: that.data.id},header: {'Content-Type': 'application/json'},success: function(res) {// console.log(res.data)that.setData({showOrHidden: true,re: res.data,keyValue:'',photo2: res.data.result.comment.photo,nickname2: res.data.result.comment.nickname,date2: res.data.result.comment.date,comment2: res.data.result.comment.comment})wx.hideToast();console.log(res);}})},

微信小程序---评论功能实现相关推荐

微信小程序评论功能实现
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 前端 <textarea class='the_prw_in' bindinput='bindblur' ...
微信小程序评论功能实现
微信小程序开发交流qq群 581478349 微信: 承接小程序开发 wxml <textarea class='the_prw_in' bindinput='bindblur' curso ...
微信小程序评论功能的实现（用的是假数据）
具体直接看代码 wxml: <view><button bindtap='showTalks'>查看评论</button></view><!-- ...
微信小程序评论功能实现源码，复制粘贴
wxml: 发送 js: var ComContent = '' var CommentList = '[]' var app = getApp() Page({ /** * */ data: { C ...
微信小程序——评论功能
1.前端数据渲染 <view class="list"><view>{{goodsitem.id}}</view><view>{{g ...
微信小程序-评论业务的实现
微信小程序-评论业务的实现目录微信小程序-评论业务的实现一.效果二.实现 1.wxml 2.js 3.wxss 一.效果二.实现 1.wxml <!-- wx:index = &quo ...
三步教你开通微信小程序直播功能
3月8日,微信官方举办了 "女神节"微信小程序直播的活动,联合近千品牌小程序直播首秀,当天,每个用户平均观看直播时间超过了8分钟,人均点赞数达到了280次,分享次数最高的直播间达到 ...
微信小程序支付功能-服务器端实现(附源码)
实现了小程序最新的V3版本支付功能, 包括:支付.支付通知.退款.退款通知. 服务器端使用java开发,springboot框架源码链接在评论中微信小程序支付功能-服务器端实现(附源码)_哔哩哔哩 ...
微信小程序插件功能页开发详细流程
有问题可以扫码加我微信,有偿解决问题.承接小程序开发. 微信小程序开发交流qq群 173683895 . 526474645 : 正文: 关于新出的微信小程序插件功能页做一下记录,希望能帮到大 ...

微信小程序---评论功能实现

微信小程序---评论功能实现相关推荐

最新文章

热门文章