您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)使用uni-app怎么實(shí)現(xiàn)一個(gè)點(diǎn)贊評(píng)論功能,文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
html
<view class="toolbar"> <view class="timestamp">{{item.timetype}}</view> <!-- 點(diǎn)贊 如果islove==1,圖片變?yōu)辄c(diǎn)贊的圖片--> <view class="like" @tap="like(index,item.id)"> <image :src="item.islove==1?'../../static/images/lllllike.png':'../../static/images/llike.png'"></image> </view> <!-- 評(píng)論 --> <view class="comment" @tap="comment(index,item.id)"> <image src="../../static/images/pinglun.png"></image> </view> </view> <!-- 贊/評(píng)論區(qū) --> <view class="post-footer"> <!-- 點(diǎn)贊區(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> <!-- 評(píng)論區(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)評(píng)論發(fā)送成功之后實(shí)時(shí)渲染出來(lái)評(píng)論列表--> <view class="footer_content" v-if="commentStatus && index==commentIndex"> <text class="comment-nickname">{{realtimename}}: <text class="comment-content">{{realtimecontent}}</text></text> </view> </view>
// 點(diǎn)贊 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) } }, // 點(diǎn)贊接口 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) } } }) },
// 點(diǎn)擊評(píng)論 comment(index,communityId) { this.showInput = true; //調(diào)起input框 this.focus = true; // 對(duì)焦 this.communityId = communityId }, // 點(diǎn)擊發(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() // 整個(gè)頁(yè)面數(shù)據(jù)刷新 this.init_input() this.commentStatus = false // 臨時(shí)渲染評(píng)論的列表隱藏 this.realtimecontent = '' this.realtimename = '' this.input_placeholder = '評(píng)論'; } else { console.log(res.data) } } }) } // 取消評(píng)論/評(píng)論完成輸入框狀態(tài)值 init_input() { this.showInput = false; this.focus = false; this.input_placeholder = '評(píng)論'; this.is_reply = false; },
上述就是小編為大家分享的使用uni-app怎么實(shí)現(xiàn)一個(gè)點(diǎn)贊評(píng)論功能了,如果剛好有類(lèi)似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。