快活林资源网 Design By www.csstdc.com
本文实例为大家分享了微信小程序实现点赞业务的具体代码,供大家参考,具体内容如下
一、效果
二、实现
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="/UploadFiles/2021-04-02/caozuo.png">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 }) }, })以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
快活林资源网 Design By www.csstdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
快活林资源网 Design By www.csstdc.com
暂无评论...
更新日志
2024年05月17日
2024年05月17日
- 武曼《偏爱HQ》头版限量编号[低速原抓WAV+CUE]
- 许佳琪《4 Letters Long (坠)》[320K/MP3][22.95MB]
- 许佳琪《4 Letters Long (坠)》[FLAC/分轨][73.62MB]
- SALLY李莎丽《EASTERN YOUTH》[320K/MP3][14.49MB]
- 原音母版1:1直刻《民谣精逊[低速原抓WAV+CUE]
- 原音母版1:1直刻《卓依婷精选集》[低速原抓WAV+CUE]
- 【佛之吧沙发】VA-BuddhaBar-BestOf2byRavin(FLAC)
- [ABC唱片]-《雪莉—蓝》[SACD-008][SACD][WAV+CUE]
- 黎瑞恩.2002-理想的日子精选2CD【环球】【WAV+CUE】
- 【驰放沙发(J)】VA-2024-WinterTime,Vol.12(FLAC)
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 韩红《青藏高原+红+韩红精选集》3CD[WAV分轨][1.7G]
- 高胜美《经典金选》1991-1994 4CD[WAV整轨][1.9G]
- 【迷幻电音】AstralWaves-2023-Singles,RemixesandRaritiesII(FLAC)
- 中唱唱片群星《好歌珍藏-游子情深》2CDWAV