小程序实现发表评论功能


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 相关文章推荐
jQuery Ajax之load()方法
Oct 12 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
javascript表格的渲染组件
Jul 03 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
js实现模糊匹配功能
Feb 15 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
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和ACCESS写聊天室(五)
2006/10/09 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
在Python的Django框架中创建和使用模版
2015/07/15 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
python调用API实现智能回复机器人
2018/04/10 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
PyTorch实现AlexNet示例
2020/01/14 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
副厂长岗位职责
2014/02/02 职场文书
物理学专业求职信
2014/07/04 职场文书
酒桌上的开场白
2015/06/01 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
安全主题班会教案
2015/08/12 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
python实现网络五子棋
2021/04/11 Python
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS