uni-app實現(xiàn)點贊評論功能
更新時間:2019年11月25日 11:35:35 作者:houqq
這篇文章主要介紹了uni-app實現(xiàn)點贊評論功能,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
模擬朋友圈實時點贊及評論功能
點贊思路:點擊的時候,使用push(點贊)以及slice(取消贊)方法處理數(shù)組,并且調用點贊接口
評論思路:點擊的時候,寫多一個評論列表,當點擊發(fā)送的時候commentStatus=true,且索引等于點擊的索引。同時調用獲取評論列表的接口
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> <!-- 當評論發(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; //調起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ù)據刷新 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; },
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Javascript Cookie讀寫刪除操作的函數(shù)
Javascript Cookie讀寫刪除操作的函數(shù)代碼,需要操作cookies的朋友可以參考下。2010-03-03Bootstrap自動適應PC、平板、手機的Bootstrap柵格系統(tǒng)
這篇文章主要介紹了Bootstrap自動適應PC、平板、手機的Bootstrap柵格系統(tǒng)的相關資料,需要的朋友可以參考下2016-05-05Javascript 中的 call 和 apply使用介紹
JavaScript 中通過call或者apply用來代替另一個對象調用一個方法,將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象2012-02-02xmlplus組件設計系列之路由(ViewStack)(7)
xmlplus 是一個JavaScript框架,用于快速開發(fā)前后端項目。這篇文章主要介紹了xmlplus組件設計系列之路由,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05javascript和jquery實現(xiàn)用戶登錄驗證
這篇文章主要為大家詳細介紹了javascript和jquery分別實現(xiàn)用戶登錄驗證的方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-05javascript設計模式 – 迭代器模式原理與用法實例分析
這篇文章主要介紹了javascript設計模式 – 迭代器模式原理與用法,結合實例形式分析了javascript迭代器模式相關概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04