效果展示：


代码部分：
首先建完小程序项目后 会有一个自动生成的utils 文件。
Utils.js:
var ossAliyuncs = “http://soupu.oss-cn-shanghai.aliyuncs.com”;

function formatTime(date) {
var year = date.getFullYear() //获取年
var month = date.getMonth() + 1 //获取月
var day = date.getDate() //获取日

var hour = date.getHours() //获取小时
var minute = date.getMinutes() //获取分钟
var second = date.getSeconds() //获取秒

return [year, month, day].map(formatNumber).join(’-’) + ’ ’ + [hour, minute, second].map(formatNumber).join(’:’)
}

function formatDate(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()

return [year, month, day].map(formatNumber).join(’-’)
}

function formatNumber(n) {
n = n.toString()
return n[1] ? n : ‘0’ + n
}

module.exports = {
formatTime: formatTime,
formatDate: formatDate,
ossAliyuncs: ossAliyuncs
}
接下来是我们创建的评论界面代码：
Js:
var util = require("…/…/utils/util")

Page({
data: {
isShow: false,//控制emoji表情是否显示
isLoad: true,//解决初试加载时emoji动画执行一次
content: “”,//评论框的内容
isLoading: true,//是否显示加载数据提示
disabled: true,
cfBg: false,
_index: 0,
detail:
{
},
comments: [
{
avatar: util.ossAliyuncs + “/images/banner6.jpg”,
uName: “一朵奇葩向阳开”,
time: “2016-12-11”,
content: "门前大桥下，游过一群鸭~。
},
{
avatar: util.ossAliyuncs + “/images/banner2.jpg”,
uName: “一朵奇葩向阴开”,
time: “2016-12-11”,
content: "快来快来数一数~。
},
{
avatar: util.ossAliyuncs + “/images/banner5.jpg”,
uName: “一朵奇葩朝天开”,
time: “2016-12-01”,
content: " 2₄6₇8~ "
},
{
avatar: util.ossAliyuncs + “/images/banner5.jpg”,
uName: “一朵奇葩朝天开”,
time: “2016-12-01”,
content: " 2₄6₇8~ "
}
],
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: [],//支付宝表情
title: ‘’//页面标题
},
play(e) {

},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
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
})
},
onReady: function () {
// 页面渲染完成
//设置当前标题
wx.setNavigationBarTitle({
title: this.data.title
})
},
onShow: function () {
// 页面显示
},
onHide: function () {
// 页面隐藏
},
onUnload: function () {
// 页面关闭
},
//上拉加载
onReachBottom: function () { //页面上拉的处理函数
var conArr = [], that = this;
that.data.cfBg = false;
console.log(“onReachBottom”)
if (that.data._index < 5) {
for (var i = 0; i < 5; i++) {
conArr.push({
avatar: util.ossAliyuncs + “/images/banner5.jpg”,
uName: “一朵奇葩向阳开”,
time: util.formatTime(new Date()),
content: “我是上拉加载的新数据” + i
})

}
//模拟网络加载
setTimeout(function () {
that.setData({
comments: that.data.comments.concat(conArr)
})
}, 1000)
} else {
that.setData({
isLoading: false
})
}
++that.data._index;
},
//解决滑动穿透问题
emojiScroll: function (e) {
console.log(e)
},
//文本域失去焦点时 事件处理
textAreaBlur: function (e) {
//获取此时文本域值
console.log(e.detail.value)
this.setData({
content: e.detail.value
})

},
//文本域获得焦点事件处理
textAreaFocus: function () {
this.setData({
isShow: false,
cfBg: false
})
},
//点击表情显示隐藏表情盒子
emojiShowHide: function () {
this.setData({
isShow: !this.data.isShow,
isLoad: false,
cfBg: !this.data.false
})
},
//表情选择
emojiChoose: function (e) {
//当前输入内容和表情合并
this.setData({
content: this.data.content + e.currentTarget.dataset.emoji
})
},
//点击emoji背景遮罩隐藏emoji盒子
cemojiCfBg: function () {
this.setData({
isShow: false,
cfBg: false
})
},
//发送评论评论 事件处理
send: function () {
var that = this, conArr = [];
//此处延迟的原因是 在点发送时 先执行失去文本焦点 再执行的send 事件 此时获取数据不正确 故手动延迟100毫秒
setTimeout(function () {
if (that.data.content.trim().length > 0) {
conArr.push({
avatar: util.ossAliyuncs + “/images/banner5.jpg”,
uName: “一朵奇葩向阳开”,
time: util.formatTime(new Date()),
content: that.data.content
})
that.setData({
comments: that.data.comments.concat(conArr),
content: “”,//清空文本域值
isShow: false,
cfBg: false
})
} else {
that.setData({
content: “”//清空文本域值
})
}
}, 100)
}
})
Wxml:

发送

Wxss:
/* pages/details/detail.wxss */

.container {
padding-bottom: 45px;
}

.c-top {
width: 100%;
}

.c-video-img {
width: 100%;
height: 240px;
background-color: #000;
}

video {
width: 100%;
height: 100%;
}

.i-img {
width: 100%;
height: 100%;
}

.t-info {
background-color: #fff;
padding: 8px 15px;
display: flex;
flex-direction: column;
}

.ti-top {
display: flex;
justify-content: space-between;
width: 100%;
margin: 0 -15px;
padding: 0 15px 8px 15px;
color: #888;
}
.ti-content {
border-top: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
padding: 8px 15px;
margin: 0 -15px 10px -15px;
font-size: 14px;
}
.ti-bottom {
display: flex;
justify-content: space-between
}
.ti-bottom .c-u-img {
width: 23px;
height: 23px;
}
.t-info .iconfont {
vertical-align: middle;
margin-right: 5px;
}
.comments {
margin-top: 10px;
}

.content {
word-break: break-all;
font-size: 14px;
}

.item {
display: flex;
position: relative;
padding: 15px;
background-color: #fff;
margin-bottom: 1px;
}

.i-right {
width: 100%;
}

.c-u-img {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 8px;
}

.item .top {
display: flex;
justify-content: space-between;
margin-bottom: 3px;
}

.item .u-name {
color: deepskyblue;
font-size: 14px;
}

.item .time {
color: #888;
font-size: 12px;
}

.comment-fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
z-index: 100;
}

.cf-bg {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: transparent;
z-index: 99;
}

.cf-box {
padding: 8px 5px;
display: flex;
justify-content: center;
}

.t-info textarea {
background: red;
padding: 8px 5px;
height: 30px;
box-sizing: border-box;
width: 100%;
display: block;
}

.cf-content {
background-color: #f2f2f2;
padding: 8px 5px;
font-size: 12px;
height: 30px;
max-height: 40px;
width: 100%;
}

.cf-send {
width: 50px;
display: flex !important;
flex-direction: column;
justify-content: center;
margin-left: 5px;
border-radius: 2px;
text-align: center;
padding: 0 2px !important;
font-size: 12px;
background-color: #e64340;
color: #fff;
}

.cf-send.touch-active:active {
background-color: #b03f3e;
}

.emoji {
background-color: #fff;
width: 30px;
height: 30px;
text-align: center;
padding-top: 2px;
box-sizing: border-box;
font-size: 20px;
}

.emoji-box {
position: relative;
height: 200px;
padding: 5px 0;
box-sizing: border-box;
margin-bottom: -200px;
}

.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-keyframes emoji-move-in {
0% {
margin-bottom: -200px;
}

100% {
margin-bottom: 0;
}
}

@keyframes emoji-move-in {
0% {
margin-bottom: -200px;
}

100% {
margin-bottom: 0;
}
}

@-webkit-keyframes emoji-move-out {
0% {
margin-bottom: 0;
}

100% {
margin-bottom: -200px;
}
}

@keyframes emoji-move-out {
0% {
margin-bottom: 0;
}

100% {
margin-bottom: -200px;
}
}

@-webkit-keyframes pd-left-move {
0% {
padding-left: 5px;
}

100% {
padding-left: 15px;
}
}

@keyframes pd-left-move {
0% {
padding-left: 5px;
}

100% {
padding-left: 15px;
}
}