微信小程序——评论点赞功能

实现的最终效果图

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是返回顶部函数
//scroll-view发布之后返回到顶部
 
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
    }
  },

 

 

 

posted @ 2018-11-27 14:24  夏天的薰风  阅读(20145)  评论(10)  编辑  收藏  举报