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
the term: 1. VM: Virtual Machine step: 1. Downloa...
This time let’s look at a navigation bar layout w...
MySQL 8.0 compressed package installation method,...
Common utf8mb4 sorting rules in MySQL are: utf8mb...
Before installing Tomcat, install the JDK environ...
1. Introduction to gitlab Gitlab official address...
Method 1: Install the plugin via npm 1. Install n...
Table of contents 1. Problem Background 2. What a...
Download CentOS7 The image I downloaded is CentOS...
CSS controls the printing style of web pages : Use...
Table of contents Preface 1. Routing lazy loading...
Table of contents 1. Pull the Redis image 2. Crea...
Table of contents 1. typeof 2. instanceof 3. Diff...
This article introduces several methods of implem...
This article example shares the specific code of ...