微信小程序点赞功能如何用代码实现?
Admin 2021-11-11 群英技术资讯 902 次浏览
这篇文章给大家分享的是微信小程序点赞功能的实现。小编觉得挺有趣的,而且也很实用,因此分享给大家做个参考,文中示例代码介绍的非常详细,感兴趣的朋友接下来一起跟随小编看看吧。
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 }) }, })
以上就是微信小程序点赞功能的实现代码分享,上述示例具有一定的借鉴价值,有需要的朋友可以参考学习,希望对大家学习或工作有帮助,想要了解更多可以继续浏览群英网络其他相关的文章。
文本转载自脚本之家
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
onclick是绑定事件,click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,本片文章讲的很详细,大家可以看看,希望能够给你带来帮助
本文主要给大家分享用JS实现点击可以展开菜单的功能,点击展开菜单也是比较常见的菜单样式设计,因此分享给大家做个参考,那么具体怎样做呢?实现效果及代码如下,感兴趣的朋友可以参考。
最近项目停工了,RageFrame的学习暂时告一段落,这一篇给大家分享下有关单点登录的相关知识,并提供一些demo给大家参考,对vue单点登录的实现方式感兴趣的朋友一起看看吧
目录正文拖拽旋转缩放小结正文到目前为止,我们已经能够对物体进行点选和框选的操作了,但是这还不够,因为并没有什么实际性的改变,并且画布看起来也有点呆板,所以这个章节的主要目的就是让画布中的物体活起来,其实就是增加一些常见的交互而已啦????,比如拖拽、旋转和缩放。这是这个系列最重要的章节之一,希望能够对你有所帮助。拖拽先来说说
本篇文章介绍了几个javascript的基本语法和maven的配置教程。想学习javascript和maven的朋友们可以参考一下,希望能给你带来帮助
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008