这篇文章主要为大家详细介绍了微信小程序实现点赞业务，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现点赞业务的具体代码，供大家参考，具体内容如下
一、效果
二、实现
1.逻辑
1.从登录界面时，用户数据已经缓存到本地，在onload中从本地获取用户信息保存在data.userInfo中
2.判断用户的_openid是否在loveList返回的列表中，如果是取消赞，如果不是点赞加入昵称到loveList中
3.下面用的是nickName判断，后期优化成使用_openid判断
2.wxml
<!--
wx:index = "index":列表循环后所有位置都可以访问索引
-->
<view class="item" wx:for="{{list}}" wx:index = "index">
<view class="left">
<image class="avatar"></image>
</view>
<view class="right">
<view class="nickname">{{item.nickName}}</view>
<view class="content">{{item.content}}</view>
<view class="image-list">
<image class="image" wx:for="{{item.imageList}}"></image>
</view>
<view class="time-area">
<view class="time">{{item.time}}</view>
<view>
<!--
data-index="{{index}}"
1.设置后在回调函数中currentTarget.dataset中显示
-->
<image class="operation-button" src="../../images/caozuo.png" catchtap="showOperationPannel" data-index="{{index}}"></image>
<!-- 判断当前索引和面盘索引是否一致 -->
<view class="operation-pannel" wx:if="{{showOperationPannelIndex == index}}">
<!-- 设置索引和点击函数 -->
<view class="tab" catchtap="clickLove" data-index="{{index}}">
<image class="image" src="../../images/love-white.png"></image>
<text>赞</text>
</view>
<view class="tab">
<image class="image" src="../../images/comment-white.png"></image>
<text>评论</text>
</view>
</view>
</view>
</view>
<view class="love-comment">
<!--
item.loveList=重复
item.loveList
<view class="love" wx:if="{{item.loveList.length > 0}}">
<image class="love-icon" src="../../images/love-blue.png"></image>
<text class="love-nickname" wx:for="{{item.loveList}}">老夫子 兰陵王</text>
</view>
-->
<view class="love" wx:if="{{item.loveList.length > 0}}">
<image class="love-icon" src="../../images/love-blue.png"></image>
<!-- love和整个循环的item不冲突 -->
<text class="love-nickname" wx:for-items="{{item.loveList}}"
wx:for-item = "love"
>{{love.nickName}}</text>
</view>
<view class="comment" wx:if="{{item.commentList.length > 0}}">
<view wx:for-items="{{item.commentList}}"
wx:for-item = "comment">
<text class="comment-nickname">{{comment.nickName}}</text>
<text class="comment-content">{{comment.content}}</text>
</view>
</view>
</view>
</view>
</view>
3.js
// pages/circle/list.js
var that;
Page({
/**
* 页面的初始数据
*/
data: {
userInfo:null,
list:[],
// 当前点击操作面板的索引，每条朋友圈一个面板
showOperationPannelIndex:-1,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
that = this;
for (var i = 1; i < 10; i++) {
// 定义一个对象存储数据
var circleData = {};
circleData.nickName = "朋友-" + i;
circleData.content = "朋友发布内容-" + i;
circleData.time = "2020-05-0" + i;
//图片列表
var imageList = [];
// 点赞列表
var loveList = [];
// 评论列表
var commentList = [];
// 这三个数组赋值给circleData
circleData.imageList = imageList;
circleData.loveList = loveList;
circleData.commentList = commentList;
// 给3个数组赋值
for (var j = 1; j < i; j++) {
// 图片路径，占位
imageList.push(j);
// loveList，定义loveData对象
var loveData = {};
loveData.nickName = '点赞-' + j;
// 点赞数组加入loveList
loveList.push(loveData);
// 评论数据
var commentData = {};
commentData.nickName = "兰陵王-" + j + "：";
commentData.content = "评论内容-" + j;
// 加入数据
commentList.push(commentData);
}
that.data.list.push(circleData);
}
// 重新渲染
that.setData({
list: that.data.list
})
//获取用户信息
wx.getStorage({
key: 'userInfo',
success(res){
//转换成对象
console.log("getStorage success:",JSON.parse(res.data));
that.setData({
userInfo:JSON.parse(res.data)
})
}
})
},
//控制操作面板展示
showOperationPannel(e){
console.log("showOperationPannel",e);
// 获取点击的索引
var index = e.currentTarget.dataset.index;
// 如果正在展示，则关闭
if(that.data.showOperationPannelIndex == index){
that.setData({
// 索引从0开始
showOperationPannelIndex:-1
})
}
else{
that.setData({
// 设置成当前点击的索引
showOperationPannelIndex:index
})
}
},
// 点赞功能
clickLove(e){
console.log(e);
var index = e.currentTarget.dataset.index;
// 将这条数据取出
var circleData = that.data.list[index];
var loveList = circleData.loveList;
var isHaveLove = false;
for(var i = 0; i < loveList.length; i++){
if(that.data.userInfo.nickName == loveList[i].nickName){
isHaveLove = true;
// 移除点赞
loveList.splice(i,1);
break;
}
}
if(!isHaveLove){
loveList.push({nickName:that.data.userInfo.nickName});
}
that.setData({
list:that.data.list,
// 关闭点赞评论面板
showOperationPannelIndex:-1
})
},
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持米米素材网。
发表评论