>>跟着b站up主“咸虾米_”学习微信小程序开发中,把学习记录存到这方便后续查找。
课程连接:https://www.bilibili.com/video/BV19G4y1K74d?p=25&vd_source=9b149469177ab5fdc47515e14cf3cf74
一、javascript参考手册——splice
https://www.runoob.com/jsref/jsref-splice.html
二、代码
1、formKT.js的Page下添加如下代码
data: {
iptValue:"",
listArr:[
{id:123,title:"告诉老莫我要吃鱼"},
{id:456,title:"咖啡不冲,迟早成功"},
{id:789,title:"妻管严很幸福的哦"}
]
},
//------------------------------------
//点击发布按钮
onSubmit(){
let value=this.data.iptValue
let arr=this.data.listArr;//先获取数组
arr.push({//用push向数组中追加对象
id:Date.now,//设置id为时间戳
title:value
})
this.setData({//将数组更新成最新的arr
listArr:arr,
iptValue:""//将输入框的内容清空
})
console.log(this.data.iptValue);
},
//----------------------------------
//点击关闭
clickClose(e){
let {index}=e.currentTarget.dataset;
let arr=this.data.listArr;
arr.splice(index,1); //splice(index,n):从index位置开始删除n个元素
this.setData({
listArr:arr
})
console.log(e.currentTarget.dataset);
},
2、formKT.wxml
<view class="title">
狂飙经典语录
</view>
<!--列表&几条评论-->
<view class="out">
<block wx:if="{{listArr.length}}"> <!--块可以保持布局,用view的话,当for和if嵌套,可能会出问题-->
<view class="list">
<view class="row" wx:for="{{listArr}}" wx:key="id"> <!--for循环遍历数组listArr中的每个对象-->
<view class="text">{{index+1}}. {{item.title}}</view> <!--item就是listArr中的每一个对象,.title就是获取每个对象的title值-->
<!--点击关闭-->
<view class="close" bindtap="clickClose" data-index="{{index}}"><!--索引值默认为index-->
<icon type="clear" size="26"/>
</view>
</view>
</view>
<view class="count" wx:if="{{listArr.length}}">
共{{listArr.length}}条评论 <!--数组有几条记录就有几条评论-->
</view>
</block>
<view style="text-align: center;font-size: 38rpx;color: #555;padding: 20rpx;" wx:if="{{!listArr.length}}">
暂无语录,请添加
</view>
<!--输入框-->
<view class="comment">
<input type="text"
placeholder="请输入评论内容..."
placeholder-style="color:#aaa;font-size:28rpx"
model:value="{{iptValue}}"
/>
<button size="mini" type="primary" disabled="{{!iptValue.length}}"
bindtap="onSubmit">
发布</button>
</view>
</view>
3、formKT.wxss
.title{
font-size: 50rpx;
text-align: center;
color:#3c3c3c;
padding:60rpx 0 30rpx;
}
.out{
width: 690rpx;
margin:30rpx;
box-shadow: 0 15rpx 40rpx rgba(0,0,0,0.1);
border-radius: 10rpx;
padding:30rpx;
box-sizing: border-box;
}
.out .list .row{
padding:15rpx 0;
border-bottom:1rpx solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 34rpx;
color:#333;
}
.out .list .row .text{
padding-right: 10rpx;
box-sizing: border-box;
}
.out .count{
padding:20rpx 0;
font-size: 30rpx;
color:#888;
text-align:center;
}
.out .comment{
display: flex;
margin-top:20rpx;
}
.out .comment input{
flex:4;
background: #f4f4f4;
margin-right: 10rpx;
height: 100%;
height: 64rpx;
border-radius: 8rpx;
padding:0 20rpx;
color:#333;
}
.out .comment button{
flex:1;
}
三、示例
在对话框内输入内容,发布才会变绿。
点击发布后,对话框内的内容会自动清空。
有几条评论就显示共n条评论,删光语录的时候,会显示暂无语录。