小程序中通过判断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{
   200px;
  height: 50px;
  line-height: 50px;
  background-color: #188eee;
  color: #fff;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  text-align: center
}
.shuju>view{
   100px;
  float: left;
}

/*遍历循环的数据没有了要显示的部分*/
.shows{
   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
    });
  }

})

效果:

数据显示:

小程序中通过判断id来删除数据,当数据长度为0时,显示隐藏部分(交流QQ群:604788754)

删除所有数据之后自动显示的效果:

小程序中通过判断id来删除数据,当数据长度为0时,显示隐藏部分(交流QQ群:604788754)