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


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 相关文章推荐
pjblog中的UBBCode.js
Apr 25 Javascript
javascript RadioButtonList获取选中值
Apr 09 Javascript
jQuery的deferred对象使用详解
Aug 20 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
微信小程序实现省市区三级地址选择
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的无限分类实现想法~
2007/01/02 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
python实现BP神经网络回归预测模型
2019/08/09 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
Jupyter加载文件的实现方法
2020/04/14 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
高中生学习生活的自我评价
2013/10/09 职场文书
思想专业自荐信范文
2013/12/25 职场文书
工作表扬信的范文
2014/01/10 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
大学生党员自我评价
2015/03/04 职场文书
员工家属慰问信
2015/03/24 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
你需要掌握的20个Python常用技巧
2022/02/28 Python