这篇文章主要介绍了uni-app实现点赞评论功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
模拟朋友圈实时点赞及评论功能
点赞思路:点击的时候,使用push(点赞)以及slice(取消赞)方法处理数组,并且调用点赞接口
评论思路:点击的时候,写多一个评论列表,当点击发送的时候commentStatus=true,且索引等于点击的索引。同时调用获取评论列表的接口
html
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | < 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 > |
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | // 点赞 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) } } }) }, |
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | // 点击评论 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 ; }, |
以上就是本文的全部内容,希望对大家的学习有所帮助