小程序实现发表评论功能


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 相关文章推荐
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
fmt:formatDate的输出格式详解
Jan 09 Javascript
js脚本实现数据去重
Nov 27 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
详解elementUI中input框无法输入的问题
Apr 27 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实时显示输出
2008/10/02 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
Django中间件实现拦截器的方法
2018/06/01 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
python getpass实现密文实例详解
2019/09/24 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
源码解读Spring-Integration执行过程
2021/06/11 Java/Android