uni-app实现点赞评论功能


Posted in Javascript onNovember 25, 2019

模拟朋友圈实时点赞及评论功能

点赞思路:点击的时候,使用push(点赞)以及slice(取消赞)方法处理数组,并且调用点赞接口

评论思路:点击的时候,写多一个评论列表,当点击发送的时候commentStatus=true,且索引等于点击的索引。同时调用获取评论列表的接口

html

<view class="toolbar">
  <view class="timestamp">{{item.timetype}}</view>
  <!-- 点赞 如果islove==1,图片变为点赞的图片-->
  <view class="like" @tap="like(index,item.id)">
    <image :src="item.islove==1?'../../static/images/lllllike.png':'../../static/images/llike.png'"></image>
  </view>
  <!-- 评论 -->
  <view class="comment" @tap="comment(index,item.id)">
    <image src="../../static/images/pinglun.png"></image>
  </view>
</view>
<!-- 赞/评论区 -->
<view class="post-footer">
  <!-- 点赞区 -->
  <view class="footer_content" v-if="item.lovelist.length>0">
    <image class="liked" src="../../static/images/likelike.png"></image>
    <text class="nickname" v-for="(love,love_index) of item.lovelist" :key="love_index">{{love.name}},</text>
  </view>
  <!-- 评论区 -->
  <view class="footer_content" v-if="item.community_on.length>0" v-for="(comment,comment_index) in item.community_on" :key="comment_index">
    <text class="comment-nickname">{{comment.nickname}}: <text class="comment-content">{{comment.content}}</text></text>
  </view>
   <!-- 当评论发送成功之后实时渲染出来评论列表-->
  <view class="footer_content" v-if="commentStatus && index==commentIndex">
    <text class="comment-nickname">{{realtimename}}: <text class="comment-content">{{realtimecontent}}</text></text>
  </view>
</view>
// 点赞
like(index,communityId) {
  if (this.community[index].islove == 0) {
    this.community[index].islove = 1;
    this.community[index].lovelist.push(
      {name:this.userinfo.nickname,vipid:this.userinfo.id}
    )
    this.likeImport(communityId)
  } else {
    this.community[index].islove = 0;
    this.community[index].lovelist.splice(this.community[index].lovelist.indexOf(this.userinfo.nickname), 1)
    this.likeImport(communityId)
  }
},
// 点赞接口
likeImport(id) {
  app.vipidRequest({
    url: 'Vip/community_love',
    data: {
      id: id
    },
    header: {
      'content-type': 'application/x-www-form-urlencoded', 
    },
    method: 'POST',
    success:(res) => {
      if(res.data.status) {

      } else {
        console.log(res.data)
      }
    }
  })
},
// 点击评论
comment(index,communityId) {
  this.showInput = true; //调起input框
  this.focus = true; // 对焦
  this.communityId = communityId
},
// 点击发送
send_comment: function(message) {
  this.commentStatus = true 
  this.commentIndex = index
  this.realtimecontent = message.content
  this.realtimename = this.userinfo.nickname
  app.vipidRequest({
    url: 'Vip/community_on',
    data: {
      id: this.communityId,
      content: message.content,
      type: 1
    },
    header: {
      'content-type': 'application/x-www-form-urlencoded', 
    },
    method: 'POST',
    success:(res) => {
      if(res.data.status) {
        this.getCommunity() // 整个页面数据刷新
        this.init_input()
        this.commentStatus = false // 临时渲染评论的列表隐藏
        this.realtimecontent = ''
        this.realtimename = ''
        this.input_placeholder = '评论';
      } else {
        console.log(res.data)
      }
    }
  })
}
// 取消评论/评论完成输入框状态值
init_input() {
  this.showInput = false;
  this.focus = false;
  this.input_placeholder = '评论';
  this.is_reply = false;
},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
详解js中的原型,原型对象,原型链
Jul 16 Javascript
js实现简易ATM功能
Oct 27 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
js prototype深入理解及应用实例分析
Nov 25 #Javascript
KnockoutJS数组比较算法实例详解
Nov 25 #Javascript
js实现简单的日历显示效果函数示例
Nov 25 #Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 #Javascript
用Golang运行JavaScript的实现示例
Nov 25 #Javascript
JS插入排序简单理解与实现方法分析
Nov 25 #Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 #Javascript
You might like
PHP利用str_replace防注入的方法
2013/11/10 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
Three.js基础部分学习
2017/01/08 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
Python3实现生成随机密码的方法
2014/08/23 Python
Python中集合类型(set)学习小结
2015/01/28 Python
Python itertools模块详解
2015/05/09 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
AJax面试题
2014/11/25 面试题
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
合同协议书格式
2014/04/18 职场文书
质量负责人任命书
2014/06/06 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
售后服务承诺函格式
2015/01/21 职场文书
2015年端午节活动方案
2015/05/05 职场文书
信息技术国培研修日志
2015/11/13 职场文书
汽车销售合同文本
2019/08/08 职场文书