實現的最終效果圖

1.點贊功能

前端頁面結構

1     <view class='talk-item-zan'>
2               <view bindtap='favorclick' data-id='{{item.id}}' data-islike="{{item.is_like}}" data-dex="{{index}}" data-userid="{{item.user_id}}" class="like_box">
3                 <image src='/image/okzan.png' class="zan_img"
 
 wx:if="{{item.is_like == 1}}"></image>
4                 <image src='/image/nozan.png' class="zan_img" wx:else></image>
5                 <view class='zan_num'>{{item.like_num}}</view>
6               </view>
7             </view>
8    </view>

點贊函式favorclick

 1   favorclick: function(e) {
 2     var likeFlag = false; //標誌，避免多次發請求
 3     //避免多次點選
 4     if (likeFlag === true) {
 5       return false;
 6     }
 7     var that = this;
 8     if (e.currentTarget.dataset.userid == that.data.user_id) {
 9       that.Pop_show('/image/close.png', '不能給自己評論點贊');
10
 
       return
11     }
12     var comment_id = e.currentTarget.dataset.id; //點選當前項的id
13     var index = e.currentTarget.dataset.dex;
14     var islike = e.currentTarget.dataset.islike;
15     var message = this.data.talks;
16     var timestamp = Date.parse(new Date());
17     timestamp = timestamp / 1000;
18     var zanInfo = {
19       token: App.globalData.portConfig.token,
20       timestamp: timestamp,
21       comment_id: comment_id,
22       cancel: islike,
23     }
24     var zanData = zanInfo;
25     var postzanData = that.makePostData(zanData, that.data.key);
26     wx.request({
27       url: App.globalData.portConfig.HTTP_BASE_URL + '/comment/addLike', //點贊介面
28       data: postzanData,
29       method: 'POST',
30       header: {
31         'content-type': 'application/x-www-form-urlencoded'
32       },
33       success: function(res) {
34         for (let i in message) {
35           if (i == index) {
36             if (message[i].is_like == 0) {
37               that.data.talks[index].is_like = 1
38               message[i].like_num = parseInt(message[i].like_num) + 1
39             } else {
40               that.data.talks[index].is_like = 0
41               message[i].like_num = parseInt(message[i].like_num) - 1
42             }
43           }
44         }
45         that.setData({
46           talks: message
47         })
48         console.log("點贊成功", res);
49 
50       },
51       complete: function(res) {
52         likeFlag = false;
53       }
54     })
55   },

其中設定likeFlag避免多次點選，當一次點選請求介面完成後才能進行下次點選，在complete完成後把likeFlag值置為false。

2.評論功能，發表評論後顯示在最上面

 1 faBu: function() {
 2     let that = this;
 3     if (!that.data.inputValue) {
 4       return false;
 5     } else {
 6       var timestamp = Date.parse(new Date());
 7       timestamp = timestamp / 1000;
 8       var voice_id = that.data.voice_id;
 9       var content = this.data.inputValue;
10       var newCommentInfo = {
11         token: App.globalData.portConfig.token,
12         timestamp: timestamp,
13         voice_id: voice_id,
14         reply_user_id: 0,
15         pid: 0,
16         source: 1,
17         content: content
18       }
19       var newCommentData = newCommentInfo;
20       var postnewCommentData = that.makePostData(newCommentData, that.data.key);
21       wx.request({
22         url: App.globalData.portConfig.HTTP_BASE_URL + '/comment/addComment', //釋出評論的介面
23         data: postnewCommentData,
24         method: 'POST',
25         header: {
26           'content-type': 'application/x-www-form-urlencoded' // 預設值
27         },
28         success: function(res) {
29           console.log("成功評論", res);
30           that.data.talks.unshift({
31             user_avater: that.data.headimgurl,
32             user_name: that.data.nickName,
33             content: that.data.inputValue,
34             createtime: '剛剛'
35           })
36           that.data.inputValue = '';
37           that.setData({
38             talks: that.data.talks,
39             inputValue: that.data.inputValue,
40             talksAnimationData: that.animation.export(),
41             sendShow: true
42           })
43           that.tapMove();
44         }
45       })
46 
47 
48     }
49   },

其中tapMove是返回頂部函式

tapMove: function(e) {
this.setData({
scrollTop: 0
})
},

實時獲取輸入框中的字數，給字數限制

//實時獲取評論框的輸入的內容
  inputValue(e) {
    this.setData({
      inputValu: e.detail.value,
      val_len: e.detail.value.length,
      sendShow: false
    })
    if (!e.detail.value) {
      this.setData({
        sendShow: true
      })
    }
    console.log(this.data.inputValu)
    if (this.data.val_len >= 140) {
      this.Pop_show('/image/close.png', '評論超過最大字數限制')
      return
    }
  },