[TOC] ### 1. wxml （模板） ~~~ <view class="like" bind:tap="onLike"> <image src="{{like?yesSrc:noSrc}}" class="icon"></image> <text>{{count}}</text> </view> ~~~ ### 2. js （模板） ~~~ // components/classic/like/index.js Component({ /** * 組件的屬性列表 */ properties: { like:{ type:Boolean, value:false }, count:Number }, /** * 組件的初始數據 */ data: { yesSrc:'images/like.png', noSrc:'images/unlike.png' }, /** * 組件的方法列表 */ methods: { onLike(){ var like = this.properties.like; var count = this.properties.count; if(like){ this.setData({ like:false, count:count-1 }) }else{ this.setData({ like:true, count:count+1 }) } var behavior = this.data.like this.triggerEvent('like',{ behavior }) } } }) ~~~ ### 3. wxml（使用） ~~~ <v-like like="{{like}}" count="{{count}}" bind:like="onLike"></v-like> ~~~ ### 4. js （使用） ~~~ onLoad: function (options) { classicModel.getLatest(res => { this.setData({ classic: res, like:res.like_status, count:res.fav_nums }) }) }, onLike(e) { var behavior = e.detail.behavior; var id = this.data.classic.id; var type = this.data.classic.type; likeModel.getLike(behavior, id, type); }, onPrev() { this._updateData("previous"); }, onNext() { this._updateData("next"); }, _updateData(nextOrprevious) { classicModel.getClassic(this.data.classic.index, nextOrprevious, res => { /* 更新點贊的狀態 */ likeModel.getLikeStatus(res.type,res.id,res=>{ this.setData({ like:res.like_status, count:res.fav_nums }) }) this.setData({ classic: res, // 更新是否為第一期的狀態 isFirst: classicModel.isFirst(res.index), isLatest: classicModel.isLatest(res.index) }) }) } ~~~ ### 5. modeler （再次封裝的模塊） ~~~ import {HTTP} from "../utils/http"; class LikeModel extends HTTP{ getLike(behavior,id,type){ const url = behavior?"/like":"/like/cancel" this.request({ url, method:"POST", data:{ art_id:id, type } }) } /* 獲取期刊點贊的信息 */ getLikeStatus(type,id,callback){ this.request({ url:`/classic/${type}/${id}/favor`, success:res=>{ callback(res); } }) } } export {LikeModel} ~~~