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


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实现一些常用软件的下载导航
Aug 03 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
javascript实现前端成语点击验证优化
Jun 24 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 Javascript
React forwardRef的使用方法及注意点
Jun 13 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面向对象的方法重载两种版本比较
2008/09/08 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
关于使用js算总价的问题
2017/06/23 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
Python Socket编程详细介绍
2017/03/23 Python
详解python调度框架APScheduler使用
2017/03/28 Python
使用numba对Python运算加速的方法
2018/10/15 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
Pycharm小白级简单使用教程
2020/01/08 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
生日派对邀请函
2014/01/13 职场文书
简历里的自我评价
2014/01/31 职场文书
故宫导游词
2015/01/31 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
品德与社会教学反思
2016/02/24 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python