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 相关文章推荐
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
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+mysql一个名片库程序
2006/10/09 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
JavaScript之编码规范 推荐
2012/05/23 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
python抓取网页内容示例分享
2014/02/24 Python
python实现证件照换底功能
2019/08/20 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
PyTorch的torch.cat用法
2020/06/28 Python
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
应用艺术毕业生的自我评价
2013/12/04 职场文书
工厂仓管员岗位职责
2014/01/01 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
秋冬农业生产标语
2014/10/09 职场文书
学校通报表扬范文
2015/05/04 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang