微信展示类小程序_微信小程序完成简略评论功用

发布时间:2021-01-08 11:17 作者:jianzhan

摘要: 手机微信微信小程序完成简易评价作用 本文关键为大伙儿详尽详细介绍了手机微信微信小程序完成简易评价作用,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一下

微信小程序实现简单评论功能       这篇文章主要为大家详细介绍了微信小程序实现简单评论功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

具体直接看代码

wxml:

 view 
 button bindtap='showTalks' 查看评论 /button 
 /view 

view {{talks.length}} 条评论 /view image src='../../../images/close.png' bindtap='hideTalks' /image /view
scroll-view scroll-y="true" bindscrolltolower="onScrollLoad" view wx:for="{{talks}}" wx:key="*this" view image src='{{item.avatarUrl}}' /image /view view view text {{item.nickName}} /text text {{item.talkTime}} /text /view text {{item.content}} /text
!-- 评论底部 -- view catchtap="cemojiCfBg" style="display:{{cfBg 'block' : 'none'}}" /view view class=" {{isShow 'footer_boxmovein' : 'talk-footer'}}" view view catchtap="emojiShowHide" /view input type='text' value='{{inputValue}}' bindblur="bindInputBlur" placeholder='有爱评论,说点儿好听的~' /input button 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" block wx:for="{{emojis}}" wx:for-item="e" wx:key="" view image bindtap="emojiChoose" src="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;

-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;
inputBiaoqing: '', faces: ['timg image quality=80 size=b9999_10000 sec=60 di=0cc9d01a4ae2deca5634c3136d5c01f6 imgtype=0 src=http%3A%2F%%2Fuploads%2Fitem%2F201406%2F12%2F203_u4nG5.jpeg', 'timg image quality=80 size=b9999_10000 sec=59 di=da2c1c4e868ee95f3cd65ffc6e24a456 imgtype=0 src=http%3A%2F%%2Fuploads%2Fitem%2F201505%2F01%2F203_yuTQc.jpeg', 'timg image quality=80 size=b9999_10000 sec=56 di=7d46a1482a8e798a70d8db02 imgtype=0 src=http%3A%2F%%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 = ['94oJfD_bAAcT8t7mm9GUKT-xh_/timg image quality=100 size=b4000_4000 sec= 559b0f8edcbfd1adb6e667d src=uploads/item/201505/15/200_iWF2U.jpeg', 'timg image quality=80 size=b9999_10000 sec=67 di=ce7a08b889137a70f7b4568e13df0e4d imgtype=0 src=http%3A%2F%2Fd.%2Fzhidao%2Fpic%85a.jpg', 'timg image quality=80 size=b9999_10000 sec=62 di=8ec21b75cb44de532f8be29300f075b0 imgtype=0 src=http%3A%2F%2Fpic36.%2F%2F00050_b.jpg', let names = ['佳佳', '晶晶', '欢欢', '妮妮', '娜娜', '锅锅']; let contents = ['为什么你总是对我不理不睬呢', '干嘛老是不见你了', '我们都有字节的梦想', '你有什么资格不努力呢']; let talktime = '刚刚'; console.log(talktime) talks = talks.concat(that.data.talks); // 随机产生10条评论 for (var i = 0; i 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() })

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


  • 网易游戏一出H5必是经典,

    原题目:网易游戏一出H5必是经典,到底有哪些窍门? 写了那么多受欢迎H5实例 小结了一下达现网易游戏的霸屏H5数最多 例如近期遭受普遍关心的这支 《工作第一天,网易游戏父亲教我

  • 这种互联网媒体经营必需

    原题目:这种互联网媒体经营必需专用工具,还不赶紧个人收藏 这种互联网媒体经营必需专用工具,还不赶紧个人收藏,从业互联网媒体经营工作中。互联网媒体经营必需专用工具,不

  • 11三万换两千万粉絲!抽奖

    原题目:11三万换两千万粉絲!抽奖活动——你没并不知的营销推广武器 抽奖活动做为传统式营销推广方式,仍然呈现出了强劲的潜能,刷爆你的微信朋友圈。 王校长在新浪微博进行的

  • PPT强手必存9个网站,把

    模拟题目:PPT强手必存9个网站,把PPT做出高级感,这类彻底完全免费网站十分非常值得拥有 倘若你是新手,才没多久碰触PPT; 倘若你需要做出好看的PPT,却无法下手; 倘若你碰触不了

  • 蒋方舟告知你,为何再多

    昨日,大爷在微信朋友圈刷到一个H5《蒋方舟全新新浪微博:我讲的比唱的好》,腾迅手机游戏《重任招唤》的公测宣传策划,感觉挺有趣。 最先题目为《蒋方舟全新新浪微博:我讲的