微信小程序开发学习笔记——3.11完成form评论案例的实现逻辑

>>跟着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条评论，删光语录的时候，会显示暂无语录。