uni-app實現(xiàn)點贊評論功能
模擬朋友圈實時點贊及評論功能
點贊思路:點擊的時候,使用push(點贊)以及slice(取消贊)方法處理數(shù)組,并且調(diào)用點贊接口
評論思路:點擊的時候,寫多一個評論列表,當(dāng)點擊發(fā)送的時候commentStatus=true,且索引等于點擊的索引。同時調(diào)用獲取評論列表的接口
html
<view class="toolbar">
<view class="timestamp">{{item.timetype}}</view>
<!-- 點贊 如果islove==1,圖片變?yōu)辄c贊的圖片-->
<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>
<!-- 贊/評論區(qū) -->
<view class="post-footer">
<!-- 點贊區(qū) -->
<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>
<!-- 評論區(qū) -->
<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>
<!-- 當(dāng)評論發(fā)送成功之后實時渲染出來評論列表-->
<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; //調(diào)起input框
this.focus = true; // 對焦
this.communityId = communityId
},
// 點擊發(fā)送
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() // 整個頁面數(shù)據(jù)刷新
this.init_input()
this.commentStatus = false // 臨時渲染評論的列表隱藏
this.realtimecontent = ''
this.realtimename = ''
this.input_placeholder = '評論';
} else {
console.log(res.data)
}
}
})
}
// 取消評論/評論完成輸入框狀態(tài)值
init_input() {
this.showInput = false;
this.focus = false;
this.input_placeholder = '評論';
this.is_reply = false;
},
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序使用wx.request請求服務(wù)器json數(shù)據(jù)并渲染到頁面操作示例
這篇文章主要介紹了微信小程序使用wx.request請求服務(wù)器json數(shù)據(jù)并渲染到頁面操作,結(jié)合實例形式分析了微信小程序使用wx.request發(fā)送網(wǎng)絡(luò)請求及返回結(jié)果渲染到wxml界面相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
Bootstrap 樹控件使用經(jīng)驗分享(圖文解說)
很多項目中使用樹來展示層級關(guān)系,還有些樹是為了選中項然后其他地方調(diào)用選中項。今天腳本之家小編給大家?guī)砹薆ootstrap 樹控件使用經(jīng)驗分享,需要的朋友參考下吧2017-11-11
layui 根據(jù)后臺數(shù)據(jù)動態(tài)創(chuàng)建下拉框并同時默認(rèn)選中的實例
今天小編就為大家分享一篇layui 根據(jù)后臺數(shù)據(jù)動態(tài)創(chuàng)建下拉框并同時默認(rèn)選中的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09

