小程序实现发表评论功能


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 使用手册(六)
Sep 23 Javascript
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
jQuery AJAX回调函数this指向问题
Feb 08 Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 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
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
php 生成饼图 三维饼图
2009/09/28 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
Python求出0~100以内的所有素数
2018/01/23 Python
Python使用Pygame绘制时钟
2020/11/29 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
安全承诺书范文
2014/03/26 职场文书
森林病虫害防治方案
2014/06/02 职场文书
工作证明英文模板
2014/10/21 职场文书
营业用房租赁协议书
2014/11/26 职场文书
先进工作者推荐材料
2014/12/23 职场文书
初中语文教学随笔
2015/08/15 职场文书
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript