好资源导航 » 文章资讯 » uni-app实现点赞评论功能

uni-app实现点赞评论功能

2023-08-07 11:22:04 66

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

点赞思路：点击的时候，使用push（点赞）以及slice（取消赞）方法处理数组，并且调用点赞接口

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

html


{{item.timetype}}












0">

{{love.name}},


0"v-for="(comment,comment_index)initem.community_on":key="comment_index">
{{comment.nickname}}:{{comment.content}}



{{realtimename}}:{{realtimecontent}}

//点赞
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;
},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

uni-app实现点赞评论功能

热门推荐

随机推荐