欢迎加入小程序交流群:本群定期更新在工作种遇到的小知识(交流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 }); } })
效果:
数据显示:
删除所有数据之后自动显示的效果: