• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

实现的最终效果图

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
    }
  },

 

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap