• 小程序中通过判断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
        });
      }
    
    })

    效果:

    数据显示:

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

  • 相关阅读:
    第11组 Beta冲刺(1/5)
    第11组 Alpha事后诸葛亮
    第11组 Alpha冲刺(6/6)
    第11组 Alpha冲刺(5/6)
    第11组 Alpha冲刺(4/6)
    第11组 Alpha冲刺(3/6)
    毕设笔记
    软工实践个人总结
    第01组 Beta版本演示
    第01组 Beta冲刺(5/5)
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/7080400.html
Copyright © 2020-2023  润新知