If you think it helps, give it a thumbs up. We rookies should support each other.
index.wxml
<view class="page">
<view class="comments">
<view class="allcom">All comments</view>
<! -- Use data-index to pass subindex -->
<view class="comment" wx:for="{{coms}}" wx:key="id" data-index= "{{index}}">
<view class="c-left">
<image src="{{item.hpic}}"></image>
</view>
<view class="c-right">
<view class="c-right_top">{{item.call}}</view>
<view class="c-right_bottom">
{{item.comment}}
<view class="change" >
<! -- use wx:if="" to determine the color of the like based on the value of whether -->
<text class=".iconfont .icon-dianzan "
wx:if="{{item.whether == 0}}"
bindtap="light"
data-index="{{index}}"><text class="inc">{{item.num}}</text></text>
<text class=".iconfont .icon-dianzan changed"
wx:else
bindtap="light"
data-index="{{index}}"><text class="inc">{{item.num}}</text></text>
</view>
<veiw class="date">{{item.date}}</veiw>
</view>
</view>
</view>
</view>
<view class="tail">
<textarea
id="c"
placeholder="Please input your thoughts."
class="in"
bindinput="commentsChange"
value="{{com}}"
cols="30" rows="10"></textarea>
<button id="c" class="submit" bindtap="commentsubmit" form-type="submit" style="width:20vw;">published</button>
</view>
</view>
Copy the codeindex.js
const app = getApp();
// Can connect to data in app.js
const {getDate} =require ('.. /.. /utils/date');
// Introduces functions in utils date.js
Page({
data: {
"coms":[
{
"id":0.'whether':0."hpic":'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20200507%2F611083a06f4b48 6186 df0558bb7a5925.jpeg&refer=http%3a%2f%2f5b0988e595225.cdn.sohucs.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT =, jpe. g?sec=1630146060&t=d9d918cfcea58f28cedeca112b655526'."call":'Grandia'."comment":'Miyamoto didn't get a pawn, you can't make it up.'."date":'15:21, 10th Of January'."num":'0'}].com:' '
},
light:function(e){
console.log(e);
// Accept the subscript
let index = e.currentTarget.dataset.index;
let message = this.data.coms;
for(let i in message){
if(i == index){
let whetherif = false;
if(message[i].whether == 0){
whetherif = true;
message[i].whether =parseInt(message[i].whether) + 1;
message[i].num =parseInt(message[i].num ) + 1;
}else{
whetherif = false;
message[i].whether =parseInt(message[i].whether) - 1;
message[i].num =parseInt(message[i].num) - 1; }}}// After the logical relationship, reset the data
this.setData({
coms:message
})
},
commentsChange(e){
console.log(e,"-- -- -- -- -- -- -- --");
this.setData({
com: e.detail.value
})
// Introduce the comment you just entered.
},
commentsubmit: function(e) {
let {com} = this.data;
// console.log(com.trim());
// Trim () can be trimmed to see if there is any real input
// If no input is entered, an alert box will pop up, icon is the icon, duration is the duration, 2000 milliseconds
if( com.trim() == ' '){
wx.showToast({
title: 'Please enter content'.icon:'error'.duration:2000
});
return
}
const item={
id:this.data.coms.length+1.whether:0.hpic:app.globalData.userinfo.avatar,
call:app.globalData.userinfo.userName,
// Hpic and call refer to data in app.js
comment:this.data.com,
date:getDate(),
// The getDate function from date.js is introduced here via require
num:'0'
};
this.setData({
coms:[
...this.data.coms,
item
],
com:' '
})
// Add data by setData.}})Copy the codeindex.wxss
/* Import data from ali.wxss */
@import "./ali.wxss";
page{
background-color: #000;
}
.allcom{
padding-left: 20rpx;
padding-top: 20rpx;
}
.page{
color: #ffffff;
}
.comment{
display: flex;
}
.c-left{
height:200rpx;
width: 20vw;
}
.c-left image{
height: 80rpx;
width: 80rpx;
border-radius: 50%;
display: block;
margin: 30rpx auto ;
border: 0.1rpx solid grey;
}
.c-right{
height:200rpx;
width: 80vw;
}
.c-right_top,.c-right_bottom{
padding: 0 0 20rpx 0;
position: relative;
}
.change{
position: absolute;
right: 40rpx;
top: 0rpx;
}
.changed{
color:red
}
.inc{
color: #b1b1b1;
}
.date{
display: block;
font-size: smaller;
color: #69696a;
}
.tail{
height: 10vh;
width: 100vw;
background-color: #fff;
position: fixed;
/* Fixed position */
bottom: 0rpx;
color: #b1b1b1;
display: flex;
/* Use an elastic layout so that input fields and buttons are aligned on a single line */
}
.in{
padding-top: 30rpx;
padding-left: 20rpx ;
font-size: 30rpx;
}
.submit{
font-size: 31rpx;
font-weight: 400;
box-sizing: content-box;
/* Separate the padding from the border */
padding: 0;
color: #69696a;
padding-top: 20rpx;
}
.button-hover{
background-color: #fff;
}
Copy the codedate.js
module.exports = {
getDate(){
const t =new Date(a);// it must conform to the form of 01 01 01:01
const month = t.getMonth() + 1 > 10 ? t.getMonth()+1 : "0" + (t.getMonth()+1);
// The getMonth function is 0-11, so it adds 1
const date = t.getDate() > 10 ? t.getDate() : "0" + t.getDate();
const hour = t.getHours() >10 ? t.getHours() : "0" + t.getHours();
const minute = t.getMinutes() >10 ? t.getMinutes() : "0" + t.getMinutes();
return `${month}month${date}day${hour}:${minute}`
// Return the function value}}Copy the codeapp.js
App({
onLaunch: function () {
if(! wx.cloud) {console.error('Please use base library 2.2.3 or above to use cloud capabilities')}else {
wx.cloud.init({
traceUser: true})},this.globalData = {
// In this case, the default user name and avatar
userinfo: {userName:'Melon seed flavored peanuts'.avatar:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F29%2F20150929205801 _uhvj2. Jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1630587608 & t = 92 c3 030eb87bef3801cc3b5244cce53a'}}}})Copy the codeAli.wxss was not given in my last article.