小程序实现发表评论功能


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 相关文章推荐
$.ajax json数据传递方法
Nov 19 Javascript
一些mootools的学习资源
Feb 07 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
分享网页检测摇一摇实例代码
Jan 14 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 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
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
python基于右递归解决八皇后问题的方法
2015/05/25 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
python如何通过protobuf实现rpc
2016/03/06 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
python如何运行js语句
2020/09/09 Python
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
信息技术培训感言
2014/03/06 职场文书
法人委托书的范本格式
2014/09/11 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
2014年采购部工作总结
2014/11/20 职场文书
安全员岗位职责
2015/02/10 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
pytorch中[..., 0]的用法说明
2021/05/20 Python