微信小程序实现简单评论功能

<view> 
<button bindtap=\'showTalks\'>查看评论</button> 
</view>
 
 
<!-- 整个评论区 --> 
<view class=\'talks- \' animation=\'{{talksAnimationData}}\'>
<!-- 主要作用是点击后隐藏评论区 --> 
<view class=\' -white-space\' bindtap=\'hideTalks\'>
</view>
 
 
<!-- 评论区 --> 
<view class=\'talks\' bindtouchstart=\'touchStart\' bindtouchmove=\'touchMove\'> 
<!-- 评论头部 --> 
<view class=\'talk-header\'> 
<view class=\'talk-count\'>{{talks.length}} 条评论</view> 
<image src=\'../../../images/close.png\' class=\'talk-close\' bindtap=\'hideTalks\'></image> 
</view>
 
 
<!-- 评论体 --> 
<scroll-view class=\'talk-body\' scroll-y=\"true\" bindscrolltolower=\" Load\"> 
<view class=\'talk-item\' wx:for=\"{{talks}}\" wx:key=\"*this\"> 
<view class=\'talk-item-left\'>
<image class=\'talk-item-face\' src=\'{{item.avatarUrl}}\'></image>
</view>
<view class=\'talk-item-right\'> 
<view class=\'right-left\'> 
<text class=\'talk-item-nickname\'>{{item.nickName}}</text> 
<text class=\'talk-item-time\'>{{item.talkTime}}</text> 
</view> 
<text class=\'talk-item-content\'>{{item.content}}</text>
 
 
</view> 
</view> 
</scroll-view>

 
<!-- 评论底部 --> 
<view class=\"cf-bg\" catchtap=\"cemojiCfBg\" style=\"display:{{cfBg ? \'block\' : \'none\'}}\"></view> 
<view class=\" {{isShow ?\'footer_boxmovein\' : \'talk-footer\'}}\"> 
<view class=\'footer_box\'> 
<view class=\"emoji iconfont icon-emoji\" catchtap=\"emojiShowHide\"></view> 
<input class=\'talk-input\' type=\'text\' value=\'{{inputValue}}\' bindblur=\"bindInputBlur\" placeholder=\'有爱评论，说点儿好听的~\'></input> 
<button class=\'fabu-input\' bindtap=\'faBu\'>发布</button> 
</view>
 
<view wx:if=\'{{isShow}}\' class=\"emoji-box {{isShow ? \'emoji-move-in\' : \'emoji-move-out\'}} {{isLoad ? \'no-emoji-move\' : \'\'}}\"> 
<scroll-view scroll-y=\"true\" bindscroll=\"emojiScroll\" style=\"height:200px\"> 
<block wx:for=\"{{emojis}}\" wx:for-item=\"e\" wx:key=\"\"> 
<view class=\"emoji-cell\">
<image class=\"touch-active\" bindtap=\"emojiChoose\" src=\"http://soupu.oss-cn-shanghai.aliyuncs.com/emoji/{{e.emoji}}.png\" data-emoji=\"{{e.char}}\" data-oxf=\"{{e.emoji}}\"></image> 
</view> 
</block>
 
</scroll-view> 
</view> 
</view> 
</view> 
</view>

page { 
height: 100%; 
overflow: hidden;
 
}
 
 
 
/* 框架 */

.talks-  { 
position: absolute; 
bottom: -100%; 
height: 0; 
width: 100%; 
overflow: hidden; 
/* background-color: blue; */
 
}
 

. -white-space { 
height: 100%; 
width: 100%; 
background-color: #ccc; 
opacity: 0.5; 
/* background-color: green; */
 
}
 
 
.talks { 
position: absolute; 
height: 900rpx; 
width: 100%; 
bottom: 0rpx; 
background-color: #2f2d2e; 
border-top-left-radius: 3%; 
border-top-right-radius: 3%;
/* background-color: red; */
 
}
 
 
.talk-header { 
width: 100%; 
height: 70rpx; 
padding-top: 30rpx; 
text-align: center; 
}
 
 
.talk-body { 
height: 700rpx; 
}
 
 
.talk-footer { 
position: absolute; 
bottom: 0rpx; 
width: 100%; 
height: 100rpx; 
background-color: #151515; 
display: flex; 
justify-content: space-between; 
align-items: center; 
padding: 0 30rpx; 
box-sizing: border-box;
 
}
 
.footer_boxmovein{
position: absolute; 
bottom: 400rpx; 
width: 100%; 
height: 100rpx; 
z-index:1000; 
background-color: #151515; 
display: flex;
justify-content: space-between; 
align-items: center; 
padding: 0 30rpx; 
box-sizing: border-box; 
transition:all 0.6s;
 
}
 
.footer_box { 
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
 
}
 
 
 
/* 顶部元素 */ 
.talk-count { 
font-size: 26rpx; 
height: 40rpx; 
color: #6b696a;
}

 
.talk-close {
position: absolute;
top: 30rpx; 
right: 40rpx; 
width: 40rpx; 
height: 40rpx;
 
}
 
 
/* 中部元素 */ 
.talk-item { 
display: flex; 
flex-direction: row; 
align-items: flex-start; 
width: 100%; 
color: white;
 
}
 
 
.talk-item-left { 
display: flex; 
flex-direction: row; 
margin: 20rpx 30rpx; 
}
 
 
.talk-item-face { 
width: 80rpx; 
height: 80rpx;
border-radius: 50%;
 
}
 
 
.talk-item-right { 
width: 100%; 
border-bottom: solid 1rpx #6a6869; 
margin-right: 30rpx; 
/* margin-bottom: 30rpx; */ 
padding-bottom: 20rpx;
 
}
 
 
.right-left { 
display: flex; 
justify-content: space-between; 
align-items: center; 
margin: 10px 0;
 
}
 
 
.talk-item-nickname { 
font-size: 28rpx; 
color: #aaa8a9; 
}
 
 
.talk-item-time { 
font-size: 24rpx; 
color: #6a6869;
 
}
 
 
.talk-item-content {
display: block; 
font-size: 30rpx;
margin-right: 30rpx; 
width: 92%; 
white-space: pre-line; 
word-break: break-all; 
word-wrap: break-word；;
 
}
 
 
 
/* 底部元素 */ 
.talk-input { 
width: 100%; 
font-size: 30rpx; 
padding: 20rpx 0; 
padding-left: 30rpx; 
/* box-sizing: border-box; */ 
color: white; 
border-top-left-radius: 5%;
border-top-right-radius: 5%;
 
}
 

.fabu-input { 
background: red; 
font-size: 26rpx; 
color: #fff;
width: 127rpx; 
height: 60rpx; 
line-height: 60rpx;
text-align: center; 
border-radius: 30rpx; 
padding: 0;
 
}
  
.emoji {
background-color: #fff;
width: 30px; 
height: 30px; 
text-align: center; 
padding-top: 2px;
box-sizing: border-box; 
font-size: 20px;
 
}
 
.emoji-box {
position: absolute; 
bottom:-390rpx; 
left:0rpx; 
height: 200px; 
padding: 5px 16rpx; 
box-sizing: border-box; 
background:#000;
 
} 
 
.emoji-cell { 
width: 9.09%; 
height: 33px; 
display: inline-block;
 
}
 
.emoji-cell image { 
width: 23px;
height: 23px; 
padding: 5px;
border-radius: 3px;
 
}
 
 
.emoji-move-in { 
-webkit-animation: emoji-move-in 0.3s forwards; 
animation: emoji-move-in 0.3s forwards;
 
}
 
.emoji-move-out { 
-webkit-animation: emoji-move-out 0.3s forwards; 
animation: emoji-move-out 0.3s forwards;
 
}
 
 
.no-emoji-move { 
-webkit-animation: none; 
animation: none;
}
 
 
@-webkit-key s emoji-move-in { 
0% {
margin-bottom: -200px; 
}
 
100% {
margin-bottom: 0;
 
}
 
}
 
 
@key s emoji-move-in { 
0% { 
margin-bottom: -200px;
 
}
 
 
100% { 
margin-bottom: 0; 
}
 
}
 
 
@-webkit-key s emoji-move-out { 
0% { 
margin-bottom: 0;
 
} 
100% { 
margin-bottom: -200px;
 
}
 
}
 
@key s emoji-move-out { 
0% { 
margin-bottom: 0;
 
} 
 
100% { 
margin-bottom: -200px;
 
}
 
}
 
@-webkit-key s pd-left-move { 
0% { 
padding-left: 5px;
 
}
 
100% { 
padding-left: 15px;
 
}
 
} 
 
@key s pd-left-move { 
0% { 
padding-left: 5px;
 
} 
 
100% { 
padding-left: 15px;
}
 
}
 
.cf-bg {
position: fixed; 
top: 0; 
left: 0; 
bottom: 0; 
right: 0; 
background-color: transparent; 
z-index: 99;
 
}

Page({
 data: {
 talks: [],
 touchStart: 0,
 inputValue: \'\',
 inputBiaoqing: \'\',
 faces: [\'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535727304160&di=0cc9d01a4ae2deca5634c3136d5c01f6&imgtype=0&src=http%3A%2F%2Fimg5q.duitang.com%2Fuploads%2Fitem%2F201406%2F12%2F20140612202753_u4nG5.jpeg\', \'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535727304159&di=da2c1c4e868ee95f3cd65ffc6e24a456&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201505%2F01%2F20150501083603_yuTQc.jpeg\', \'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535727304156&di=7d46a1482a8e798a70d8d52320285b02&imgtype=0&src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F7b%2Ff9%2F01%2F7bf901db9091dff00a20d474c83afc45.jpg\'],
 names: [\'贝贝\', \'晶晶\', \'欢欢\', \'妮妮\'],
 isShow: false, //控制emoji表情是否显示 
 isLoad: true, //解决初试加载时emoji动画执行一次
 cfBg: false,
 emojiChar: \"☺-😋-😌-😍-😏-😜-😝-😞-😔-😪-😭-😁-😂-😃-😅-😆-👿-😒-😓-😔-😏-😖-😘-😚-😒-😡-😢-😣-😤-😢-😨-😳-😵-😷-😸-😻-😼-😽-😾-😿-🙊-🙋-🙏-✈-🚇-🚃-🚌-🍄-🍅-🍆-🍇-🍈-🍉-🍑-🍒-🍓-🐔-🐶-🐷-👦-👧-👱-👩-👰-👨-👲-👳-💃-💄-💅-💆-💇-🌹-💑-💓-💘-🚲\",
 //0x1f---
 emoji: [
  \"60a\", \"60b\", \"60c\", \"60d\", \"60f\",
  \"61b\", \"61d\", \"61e\", \"61f\",
  \"62a\", \"62c\", \"62e\",
  \"602\", \"603\", \"605\", \"606\", \"608\",
  \"612\", \"613\", \"614\", \"615\", \"616\", \"618\", \"619\", \"620\", \"621\", \"623\", \"624\", \"625\", \"627\", \"629\", \"633\", \"635\", \"637\",
  \"63a\", \"63b\", \"63c\", \"63d\", \"63e\", \"63f\",
  \"64a\", \"64b\", \"64f\", \"681\",
  \"68a\", \"68b\", \"68c\",
  \"344\", \"345\", \"346\", \"347\", \"348\", \"349\", \"351\", \"352\", \"353\",
  \"414\", \"415\", \"416\",
  \"466\", \"467\", \"468\", \"469\", \"470\", \"471\", \"472\", \"473\",
  \"483\", \"484\", \"485\", \"486\", \"487\", \"490\", \"491\", \"493\", \"498\", \"6b4\"
 ],
 emojis: [], //qq、微信原始表情
 alipayEmoji: [], //支付宝表情
 },
 
  : function() {
 var em = {},
  that = this,
  emChar = that.data.emojiChar.split(\"-\");
 var emojis = []
 that.data.emoji.forEach(function(v, i) {
  em = {
  char: emChar[i],
  emoji: \"0x1f\" + v
  };
  emojis.push(em)
 });
 that.setData({
  emojis: emojis
 })
 },
 //解决滑动穿透问题
 emojiScroll: function(e) {
 console.log(e)
 },
 //点击表情显示隐藏表情盒子
 emojiShowHide: function() {
 this.setData({
  isShow: !this.data.isShow,
  isLoad: false,
  cfBg: !this.data.false
 })
 },
 //表情选择
 emojiChoose: function(e) {
 console.log(e)
 //当前输入内容和表情合并
 // let value = e.currentTarget.dataset.emoji;
 this.data.inputBiaoqing += e.currentTarget.dataset.emoji;
 console.log(this.data.inputBiaoqing)
 this.setData({
  inputValue: this.data.inputBiaoqing
 })
 },
 //点击emoji背景遮罩隐藏emoji盒子
 cemojiCfBg: function() {
 console.log(\'womenlai\')
 this.setData({
  isShow: false,
  cfBg: false
 })
 },
 onReady: function() {
 // 评论弹出层动画创建
 this.animation = wx.createAnimation({
  duration: 400, // 整个动画过程花费的时间，单位为毫秒
  timingFunction: \"ease\", // 动画的类型
  delay: 0 // 动画延迟参数
 })
 },
 showTalks: function() {
 // 加载数据
 this.loadTalks();
 // 设置动画内容为：使用绝对定位显示区域，高度变为100%
 this.animation.bottom(\"0rpx\").height(\"100%\").step()
 this.setData({
  talksAnimationData: this.animation.export()
 })
 },
 
 hideTalks: function() {
 // 设置动画内容为：使用绝对定位隐藏整个区域，高度变为0
 this.animation.bottom(\"-100%\").height(\"0rpx\").step()
 this.setData({
  talks: [],
  talksAnimationData: this.animation.export()
 })
 },
 
 // 加载数据
 loadTalks: function() {
 // 随机产生一些评论
 wx.showNavigationBarLoading();
 let that = this;
 let talks = [];
 let faces = [\'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1535701703&di=bfde939cc559b0f8edcbfd1adb6e667d&src=http://img5q.duitang.com/uploads/item/201505/15/20150515205520_iWF2U.jpeg\',
  \'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535711703167&di=ce7a08b889137a70f7b4568e13df0e4d&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F6f061d950a7b02088811236964d9f2d3562cc85a.jpg\',
  \'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535711703162&di=8ec21b75cb44de532f8be29300f075b0&imgtype=0&src=http%3A%2F%2Fpic36.photophoto.cn%2F20150710%2F0005018347189196_b.jpg\',
 ];
 let names = [\'佳佳\', \'晶晶\', \'欢欢\', \'妮妮\', \'娜娜\', \'锅锅\'];
 let contents = [\'为什么你总是对我不理不睬呢\', \'干嘛老是不见你了\', \'我们都有字节的梦想\', \'你有什么资格不努力呢\'];
 let talktime = \'刚刚\';
 console.log(talktime)
 talks = talks.concat(that.data.talks);
 
 // 随机产生10条评论
 for (var i = 0; i < 10; i++) {
  talks.push({
  avatarUrl: faces[Math.floor(Math.random() * faces.length)],
  nickName: names[Math.floor(Math.random() * names.length)],
  content: contents[Math.floor(Math.random() * contents.length)],
  talkTime: talktime
  });
 }
 this.setData({
  talks: talks,
  talksAnimationData: that.animation.export()
 })
 wx.hideNavigationBarLoading();
 },
 
  Load: function() {
 // 加载新的数据
 this.loadTalks();
 },
 //下拉评论框隐藏
 touchStart: function(e) {
 let touchStart = e.touches[0].clientY;
 this.setData({
  touchStart,
 })
 },
 touchMove: function(e) {
 // console.log(this.data.touchStart)
 let touchLength = e.touches[0].clientY - this.data.touchStart;
 console.log(touchLength - 100)
 if (touchLength > 100) {
  this.animation.bottom(\"-100%\").height(\"0rpx\").step()
  this.setData({
  talks: [],
  talksAnimationData: this.animation.export(),
  })
 }
 },
 //输入框失去焦点时触发
 bindInputBlur: function(e) {
 console.log(e)
 console.log(this.data.inputBiaoqing)
 this.data.inputValue = e.detail.value + this.data.inputBiaoqing;
 },
 //点击发布，发布评论
 faBu: function() {
 let that = this;
 this.data.talks.unshift({
  avatarUrl: this.data.faces[Math.floor(Math.random() * this.data.faces.length)],
  nickName: this.data.names[Math.floor(Math.random() * this.data.names.length)],
  content: this.data.inputValue,
  talkTime: \'刚刚\'
 })
 that.data.inputValue = \'\';
 that.setData({
  talks: that.data.talks,
  inputValue: that.data.inputValue,
  talksAnimationData: that.animation.export()
 })
 
 }
})