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


Posted in Javascript onNovember 28, 2018

本文实例为大家分享了微信小程序实现评论功能的具体代码,供大家参考,具体内容如下

具体直接看代码

wxml:

<view> 
<button bindtap='showTalks'>查看评论</button> 
</view>
 
 
<!-- 整个评论区 --> 
<view class='talks-layer' animation='{{talksAnimationData}}'>
<!-- 主要作用是点击后隐藏评论区 --> 
<view class='layer-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="onScrollLoad"> 
<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>

.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 { 
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;
 
}

.js

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: [], //支付宝表情
 },
 
 onLoad: 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();
 },
 
 onScrollLoad: 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()
 })
 
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
JS变量及其作用域
Mar 29 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
js实现鼠标点击飘爱心效果
Aug 19 Javascript
微信小程序实现省市区三级地址选择
Jun 21 #Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 #Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 #Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 #Javascript
微信小程序实现评论功能
Nov 28 #Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 #Javascript
小程序点击图片实现自动播放视频
May 29 #Javascript
You might like
php flush类输出缓冲剖析
2008/10/19 PHP
PHP Pear 安装及使用
2009/03/19 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
php调用c接口无错版介绍
2014/03/11 PHP
轻松实现php文件上传功能
2017/02/17 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
js活用事件触发对象动作
2008/08/10 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
详解Django通用视图中的函数包装
2015/07/21 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python中is与==判断的区别
2017/03/28 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
临床医学应届生求职信
2013/11/06 职场文书
食品安全处置方案
2014/06/14 职场文书
师范类求职信
2014/06/21 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书