This article shares the specific code for the WeChat applet to implement the like business for your reference. The specific content is as follows 1. Effect2. Implementation1. Logic 1. When logging in, user data is cached locally. In onload, user information is obtained locally and saved in data.userInfo 2.wxml <!-- wx:index = "index": All positions can access the index after the list loop --> <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. After setting, it is displayed in currentTarget.dataset in the callback function --> <image class="operation-button" src="../../images/caozuo.png" catchtap="showOperationPannel" data-index="{{index}}"></image> <!-- Determine whether the current index is consistent with the disk index --> <view class="operation-pannel" wx:if="{{showOperationPannelIndex == index}}"> <!-- Set index and click function --> <view class="tab" catchtap="clickLove" data-index="{{index}}"> <image class="image" src="../../images/love-white.png"></image> <text>Like</text> </view> <view class="tab"> <image class="image" src="../../images/comment-white.png"></image> <text>Comments</text> </view> </view> </view> </view> <view class="love-comment"> <!-- item.loveList = repeat 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}}">Old Master Lanling Wang</text> </view> --> <view class="love" wx:if="{{item.loveList.length > 0}}"> <image class="love-icon" src="../../images/love-blue.png"></image> <!-- love does not conflict with the items in the entire loop --> <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({ /** * Initial data of the page */ data: { userInfo:null, list:[], // The index of the current click operation panel, one panel for each circle of friends showOperationPannelIndex:-1, }, /** * Life cycle function--listen for page loading*/ onLoad: function (options) { that = this; for (var i = 1; i < 10; i++) { // Define an object to store data var circleData = {}; circleData.nickName = "Friend-" + i; circleData.content = "Friends post content-" + i; circleData.time = "2020-05-0" + i; //Image list var imageList = []; // Like list var loveList = []; // Comment list var commentList = []; // These three arrays are assigned to circleData circleData.imageList = imageList; circleData.loveList = loveList; circleData.commentList = commentList; // Assign values to 3 arrays for (var j = 1; j < i; j++) { //Picture path, placeholder imageList.push(j); // loveList, define loveData object var loveData = {}; loveData.nickName = 'Like-' + j; // Add the likes array to loveList loveList.push(loveData); //Comment data var commentData = {}; commentData.nickName = "Lanling King-" + j + ":"; commentData.content = "Comment content-" + j; // Add data commentList.push(commentData); } that.data.list.push(circleData); } // Re-render that.setData({ list: that.data.list }) //Get user information wx.getStorage({ key: 'userInfo', success(res){ //Convert to object console.log("getStorage success:",JSON.parse(res.data)); that.setData({ userInfo:JSON.parse(res.data) }) } }) }, //Control the operation panel display showOperationPannel(e){ console.log("showOperationPannel",e); // Get the clicked index var index = e.currentTarget.dataset.index; // If it is showing, close if(that.data.showOperationPannelIndex == index){ that.setData({ // Index starts from 0 showOperationPannelIndex:-1 }) } else{ that.setData({ // Set to the index of the current click showOperationPannelIndex:index }) } }, // Like function clickLove(e){ console.log(e); var index = e.currentTarget.dataset.index; // Get this data out 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; // Remove likes loveList.splice(i,1); break; } } if(!isHaveLove){ loveList.push({nickName:that.data.userInfo.nickName}); } that.setData({ list:that.data.list, // Close the like and comment panel showOperationPannelIndex:-1 }) }, }) The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
>>: Share 9 Linux Shell Scripting Tips for Practice and Interviews
When using Maven to manage projects, how to uploa...
Preface When operating and managing Linux servers...
How to install PHP7 on Linux? 1. Install dependen...
Special symbols Named Entities Decimal encoding S...
This article shares the specific code of Vue to a...
1. Download MySQL Official website download addre...
Delete the previously installed mariadb 1. Use rp...
Table of contents Preface 1. ss command 2. Overal...
If you are a software developer, you must be fami...
Table of contents Method 1 Method 2 After install...
Today I will share with you a good-looking counte...
1. Go to Vim's official website to download t...
Tencent QQ’s homepage has been redesigned, and Web...
The effect shows that two browsers simulate each ...
Table of contents 1. CDN introduction 1.1 react (...