如果您觉得有用,不妨点个赞,我们新手应该相互扶持。
index.wxml
<view class="page">
<view class="comments">
<view class="allcom">
全部评论
</view>
<!-- 用data-index 来传入下标 -->
<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" >
<!-- 用wx:if=""来根据whether的值来判断点赞的颜色,bindtap绑定事件 -->
<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="请输入您的想法"
class="in"
bindinput="commentsChange"
value="{{com}}"
cols="30" rows="10"></textarea>
<button id="c" class="submit" bindtap="commentsubmit" form-type="submit" style="width:20vw;">
发表
</button>
</view>
</view>
index.js
const app = getApp();
//可以连接到app.js中的数据
const {getDate} =require ('../../utils/date');
// 引入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%2F611083a06f4b486186df0558bb7a5925.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630146060&t=d9d918cfcea58f28cedeca112b655526',
"call":'Grandia',
"comment":'宫本没吃到兵,你也补不到',
"date":'01月10日15:21',
"num":'0'
}
],
com:''
},
light:function(e){
console.log(e);
//接受传过来的下标
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;
}
}
}
// 逻辑关系后,重置数据
this.setData({
coms:message
})
},
commentsChange(e){
console.log(e,"--------");
this.setData({
com: e.detail.value
})
// 引入自己刚刚打入的评论。
},
commentsubmit: function(e) {
let {com} = this.data;
// console.log(com.trim());
// trim()可以掐去开头以及结尾的空白,用来判断有没有真正的输入
// 若没有输入 会弹出警示框,icon为图标 , duration为持续时间,2000毫秒
if( com.trim() == ''){
wx.showToast({
title: '请输入内容',
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 与 call 引用了app.js中的数据
comment:this.data.com,
date:getDate(),
// 此处通过require 来引入了额untils中date.js中的getDate函数
num:'0'
};
this.setData({
coms:[
...this.data.coms,
item
],
com:''
})
//通过setData 加入数据。
}
})
index.wxss
/* 引入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;
/* 固定定位 */
bottom: 0rpx;
color: #b1b1b1;
display: flex;
/* 用弹性布局让 输入框和按钮来在统一行 */
}
.in{
padding-top: 30rpx;
padding-left: 20rpx ;
font-size: 30rpx;
}
.submit{
font-size: 31rpx;
font-weight: 400;
box-sizing: content-box;
/* 脱离padding与border */
padding: 0;
color: #69696a;
padding-top: 20rpx;
}
.button-hover{
background-color: #fff;
}
date.js
module.exports = {
getDate(){
const t =new Date();
// 得符合01月01日01:01的形式 ,所以要用三元运算法来判断
const month = t.getMonth() + 1 > 10 ? t.getMonth()+1 : "0" + (t.getMonth()+1);
// getMonth函数的值为 0-11 所以得加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}月${date}日${hour}:${minute}`
// 返回函数值
}
}
app.js
App({
onLaunch: function () {
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力')
} else {
wx.cloud.init({
traceUser: true,
})
}
this.globalData = {
// 在此默认 用户名,以及头像
userinfo:{
userName:'瓜子味的花生',
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=0n&fmt=jpeg?sec=1630587608&t=92c3030eb87bef3801cc3b5244cce53a'
}
}
}
})
ali.wxss 在我上一篇文章中,就不给了。