本文实例为大家分享了微信小程序实现评论功能的具体代码,供大家参考,具体内容如下
具体直接看代码
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 "></view> <view class=" {{isShow "> <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 "> <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="/UploadFiles/2021-04-02/{{e.emoji}}.png">.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"", //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"-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() }) } })以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
微信小程序,评论
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“微信小程序实现简单评论功能”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。