小程序实现发表评论功能


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 相关文章推荐
IE与firefox之jquery用法区别
Oct 03 Javascript
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
判断ie的两种简单方法
Aug 12 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
JS实现多物体运动的方法详解
Jan 23 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 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
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
JavaScript版代码高亮
2006/06/26 Javascript
js类中获取外部函数名的方法
2007/08/19 Javascript
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python类的继承实例详解
2017/03/30 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
多个python文件调用logging模块报错误
2020/02/12 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
旅游业大学生创业计划书
2014/01/31 职场文书
企业环保标语
2014/06/10 职场文书
工程造价专业求职信
2014/07/17 职场文书
好的旅游活动方案
2014/08/19 职场文书
保安辞职信范文
2015/02/28 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技