小程序实现发表评论功能


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 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
js实现分割上传大文件
Mar 09 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
jQuery实现的placeholder效果完整实例
Aug 02 Javascript
Vue表单实例代码
Sep 05 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
详解React native fetch遇到的坑
Aug 30 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 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编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
WordPress判断用户是否登录的代码
2011/03/17 PHP
PHP header函数分析详解
2011/08/06 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
javascript常用方法汇总
2014/12/02 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
详解微信UnionID作用
2019/05/15 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
由浅入深讲解python中的yield与generator
2017/04/05 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
python调用win32接口进行截图的示例
2020/11/11 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
"引用"与多态的关系
2013/02/01 面试题
成龙洗发水广告词
2014/03/14 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
收银员岗位职责
2015/02/03 职场文书
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS