微信小程序中如何实现假数据评论的功能（完整代码）

本篇文章给大家带来的内容是关于微信小程序中如何实现假数据评论的功能（完整代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

具体直接看代码

wxml：

 view 
 button bindtap= #39;showTalks #39; 查看评论 /button 
 /view 
 !-- 整个评论区 -- 
 view >
.wxss
page {
height: 100%;
overflow: hidden;
/* 框架 */
.talks-layer {
position: absolute;
bottom: -100%;
height: 0;
width: 100%;
overflow: hidden;
/* background-color: blue; */
.layer-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-keyframes emoji-move-in {
margin-bottom: -200px;
100% {
margin-bottom: 0;
@keyframes emoji-move-in {
margin-bottom: -200px;
100% {
margin-bottom: 0;
@-webkit-keyframes emoji-move-out {
margin-bottom: 0;
100% {
margin-bottom: -200px;
@keyframes emoji-move-out {
margin-bottom: 0;
100% {
margin-bottom: -200px;
@-webkit-keyframes pd-left-move {
padding-left: 5px;
100% {
padding-left: 15px;
@keyframes pd-left-move {
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;
}
.js
Page({
data: {
talks: [],
touchStart: 0,
inputValue: #39; #39;,
inputBiaoqing: #39; #39;,
faces: [ #39;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 #39;, #39;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 #39;, #39;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 #39;],
names: [ #39;贝贝 #39;, #39;晶晶 #39;, #39;欢欢 #39;, #39;妮妮 #39;],
isShow: false, //控制emoji表情是否显示
isLoad: true, //解决初试加载时emoji动画执行一次
cfBg: false,
emojiChar: ☺-
相关推荐：
WordPress中对访客评论功能的一些优化方法_PHP

javascript实现五星评分功能_javascript技巧

基于js实现微信发送好友如何分享到朋友圈、微博_javascript技巧
以上就是微信小程序中如何实现假数据评论的功能（完整代码）的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！