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


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 相关文章推荐
Javascript 函数中的参数使用分析
Mar 27 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
JavaScript命名空间模式实例详解
Jun 20 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
vue离开当前页面触发的函数代码
Sep 01 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
django中的ajax组件教程详解
2018/10/18 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
python读文件逐行处理的示例代码分享
2013/12/27 Python
跟老齐学Python之类的细节
2014/10/13 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
用Python逐行分析文件方法
2019/01/28 Python
linux安装python修改默认python版本方法
2019/03/31 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
python 实现图片批量压缩的示例
2020/12/18 Python
会计应届生的自荐信
2013/12/13 职场文书
中层干部岗位职责
2013/12/18 职场文书
教师年度考核评语
2014/04/28 职场文书
班组拓展活动方案
2014/08/14 职场文书
商铺租房协议书范本
2014/12/04 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
立案决定书范文
2015/06/24 职场文书