zoukankan      html  css  js  c++  java
  • 小程序中通过判断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
        });
      }
    
    })

    效果:

    数据显示:

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

  • 相关阅读:
    NSURLConnection实现文件上传和AFNetworking实现文件上传
    scrollToItemAtIndexPath: atScrollPosition: animated:
    UIViewControllerTransitioningDelegate, UIViewControllerAnimatedTransitioning
    界面传值时数组赋值问题
    安装cocoapods遇到两大坑-Ruby版本升级和Podfile的配置
    iOS通知的整理笔记
    iOS简单实现毛玻璃效果
    iOS模态弹出半透明视图控制器
    友盟SDK实现分享
    iOS 本地存储四种方法
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/7080400.html
Copyright © 2011-2022 走看看