小程序实现发表评论功能


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 相关文章推荐
js 文件引入实现代码
Apr 23 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
浅谈JavaScript字符集
May 22 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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 heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
初识php MVC
2014/09/10 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
jquery 使用点滴函数代码
2011/05/20 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
python中pass语句用法实例分析
2015/04/30 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
python的json包位置及用法总结
2020/06/21 Python
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
一套Delphi的笔试题二
2013/05/11 面试题
总经理助理工作职责
2014/02/06 职场文书
职工运动会感言
2014/02/07 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
致运动员的广播稿
2015/08/19 职场文书
任命书格式范文
2015/09/22 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书