小程序中經過判斷id來刪除數據，當數據長度爲0時，顯示隱藏部分（交流QQ羣：604788754）

歡迎加入小程序交流羣：本羣按期更新在工做種遇到的小知識（交流QQ羣：604788754）

WXML:

<!--遍歷循環的數據部分-->
<block wx:for="{{datas}}" wx:for-index='idx' wx:for-item='item'>
  <view class="shuju">
    <view class="shuju01">{{item.datass}}</view>
    <view class="shuju02" bindtap="deletedata" data-id="{{idx}}">刪除</view><!--刪除本條數據-->
  </view>
</block>

<!--遍歷循環的數據沒有了要顯示的部分-->
<block wx:if="{{shows}}">
  <view class="shows">數據刪除以後要顯示的內容部分</view>
</block>

WXSS:

/*遍歷循環的數據部分*/
.shuju{
  width: 200px;
  height: 50px;
  line-height: 50px;
  background-color: #188eee;
  color: #fff;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  text-align: center
}
.shuju>view{
  width: 100px;
  float: left;
}

/*遍歷循環的數據沒有了要顯示的部分*/
.shows{
  width: 100%;
  height: 100px;
  background-color: orangered;
  text-align: center;
  line-height: 100px;
}

JS:

Page({
  data:{
    datas: [
      { datass: 11 },
      { datass: 22 },
      { datass: 33 }
    ]
  },
  deletedata:function(event){
    //獲取要刪除數據的id號
    var dataid=event.currentTarget.dataset.id;
    //找到相對應的數據內容部分
    //var shuju = this.data.datas[dataid];
    //刪除數組對應的數據內容
    this.data.datas.splice(dataid,1);
    //判斷數據的長度
    var len = this.data.datas.length;
    //經過判斷數組的長度來決定是否顯示隱藏的部分
    if(len ==0 ){
      this.data.shows =true
    }else{
      this.data.shows = false
    };
    //修改成天數據
    this.setData({
      shows: this.data.shows,
      datas: this.data.datas
    });
  }

})

效果：

數據顯示：

刪除全部數據以後自動顯示的效果：