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

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

具体直接看代码

wxml：<view><button bindtap='showTalks'>查看评论</button></view><!-- 整个评论区 --><view>.wxsspage {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 {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;}}.cf-bg {position: fixed;top: 0;left: 0;bottom: 0;right: 0;background-color: transparent;z-index: 99;}.jsPage({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: "&:-相关推荐：

WordPress中对访客评论功能的一些优化方法_PHP

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

基于js实现微信发送好友如何分享到朋友圈、微博_javascript技巧以上就是微信小程序中如何实现假数据评论的功能（完整代码）的详细内容，更多请关注小潘博客其它相关文章！