本文实例为大家分享了微信小程序实现点赞业务的具体代码,供大家参考,具体内容如下
一、效果
二、实现
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 }) }, })以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
微信小程序,点赞
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“微信小程序实现点赞业务”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
2024年05月19日
2024年05月19日
- 张琍敏1978-雪中莲[台湾复刻版][WAV+CUE]
- 叶蕴仪1993-睡美人[日本版][WAV+CUE]
- 夜晚助兴音乐-群星《新时代床头音乐-性能量》2CD[WAV]
- 24K德国HD金碟《历届奥斯卡获奖金曲》3CD[WAV整轨]
- 邰正宵《重燃爱恋 贰 Walk On》[FLAC/分轨][431.72MB]
- 苏文劭《雨停出来走走》[320K/MP3][81.11MB]
- 苏文劭《雨停出来走走》[FLAC/分轨][210.76MB]
- 群星《2024好听新歌04》十倍音质WAV分轨
- 陈宁《弹指之间HQ》头版限量[低速原抓WAV+CUE]
- 陈宁《故人还》HQCDII限量签名版[低速原抓WAV+CUE]
- 苏文劭《春曲(Lessons)》[320K/MP3][39.8MB]
- 苏文劭《春曲(Lessons)》[FLAC/分轨][97.78MB]
- 群星《2006香港高级视听展原音精选 SACD》[ISO][2G]
- 张琍敏1977-枫林小雨[台湾复刻版][WAV+CUE]
- 林一峰2014-COOKINGMUSIC[香港首版][WAV+CUE]