小程序实现发表评论功能


Posted in Javascript onJuly 06, 2018

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

小程序实现发表评论功能

1.点击发表按钮 判断内容是否为空 如果为空提示请输入内容

小程序实现发表评论功能

2.如果内容不为空 将评论框里输入的内容的值传入评论列表

<view wx:for="{{release}}" class='shoppcall comment' data-id="{{item.id }}">
      
      <button class='revoke' bindtap='binddelete' data-id='{{index}}'>撤销</button>
      
      <view class='publish'>
      <image src='https://storage.confolsc.com/storage/image/9f37e8a1fadc7ee20964dd6de7edeb4dbb4b03a1?size=130,130&t=1&redirect=1'></image>
      
      <view class='publish_list'>
       <text class='publish_list_item'>{{item.name}}</text>
       <view class='like'>
        <text class='publish_time'>{{item.time}}</text>
         <view class='like_num_list' bindtap='bindlike' data-id='{{index}}'>
          <text class='iconfont icon-dianzan2' style='{{item.likes.iszan?"color:red":"color:black"}}'></text>
          
          <text class='like_num'>{{item.likes.num}}</text>
         </view>
        
       </view>
       
       <text class='redtree_text'>{{item.textareaValue}}</text>
      </view>
      </view>
     
     
    </view>  
 
    <view wx:if='{{release.length == 0}}'>
     暂无评论
    </view>
</view>
// 点击发表评论
 formSubmit: function (e) {
  console.log('form发生了submit事件,携带数据为:', e.detail.value)
   if ( e.detail.value.input == '') {
   wx.showToast({
    title: '请输入内容',
   })
 
  } else {
   var that = this;
   var textarea_item = {};
   var textareaValue= e.detail.value.input;
   
   var release = this.data.release;
   var id = release.length 
   textarea_item.textareaValue = textareaValue;
 
    release.push(textarea_item);// 将评论内容添加到评论列表
 
 
   this.setData({
    
    release: release,
    releaseFocus: true, //隐藏输入框
    releaseValue : '' //清空输入框内容
   })
   console.log(release)
   
 
  }  
  
 },

发表完内容清空内容隐藏输入框

小程序实现发表评论功能

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

Javascript 相关文章推荐
Javascript Object.extend
May 18 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
自定义PC微信扫码登录样式写法
Dec 12 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
vue中倒计时组件的实例代码
Jul 06 #Javascript
微信小程序websocket实现聊天功能
Mar 30 #Javascript
vue中锚点的三种方法
Jul 06 #Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 #Javascript
详解Angular如何正确的操作DOM
Jul 06 #Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 #Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 #Javascript
You might like
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
PHP-redis中文文档介绍
2013/02/07 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
php-msf源码详解
2017/12/25 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
10个实用的脚本代码工具
2010/05/04 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
Python中文件遍历的两种方法
2014/06/16 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
Python如何省略括号方法详解
2020/03/21 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
大学社团计划书
2014/05/01 职场文书
工作年限证明模板
2014/11/01 职场文书
青春雷锋观后感
2015/06/10 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
总结Pyinstaller打包的高级用法
2021/06/28 Python