小程序实现发表评论功能


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 私有成员分析
Jan 13 Javascript
关于Mozilla浏览器不支持innerText的解决办法
Jan 01 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 Javascript
JavaScript中的this基本问题实例小结
Mar 09 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命名空间(Namespace)的使用详解
2013/05/04 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
php中final关键字用法分析
2016/12/07 PHP
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
Python tkinter label 更新方法
2018/10/11 Python
python生成lmdb格式的文件实例
2018/11/08 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
国际贸易专业推荐信
2013/11/15 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
2014社区三八妇女节活动总结
2014/03/01 职场文书
2014国庆节标语口号
2014/09/19 职场文书
给客户的感谢信
2015/01/21 职场文书
2015年护士节活动总结
2015/02/10 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript