欢迎加入小程序交流群:本群定期更新在工作种遇到的小知识(交流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: %;
height: 100px;
background-color: orangered;
text-align: center;
line-height: 100px;
}

JS:

Page({
data:{
datas: [
{ datass: },
{ datass: },
{ datass: }
]
},
deletedata:function(event){
//获取要删除数据的id号
var dataid=event.currentTarget.dataset.id;
//找到相对应的数据内容部分
//var shuju = this.data.datas[dataid];
//删除数组对应的数据内容
this.data.datas.splice(dataid,);
//判断数据的长度
var len = this.data.datas.length;
//通过判断数组的长度来决定是否显示隐藏的部分
if(len == ){
this.data.shows =true
}else{
this.data.shows = false
};
//修改整天数据
this.setData({
shows: this.data.shows,
datas: this.data.datas
});
} })

效果:

数据显示:

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

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

  1. 微信小程序中用户唯一ID的获取

    折腾到半夜,搞得挺兴奋,总结一下,免得忘了: 1.微信小程序直接获得的是一些简单信息,基本无用 2.用户唯一标识是openid,还有一个unionid是关联多个公众号之类情况下用,我不大关心 3.在g ...

  2. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  3. 全栈开发工程师微信小程序-中(中)

    全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...

  4. 在微信小程序中使用LeanCloud(一)

    之前学习了微信小程序前端,使用到LeanCloud线上数据库 [传送门].作为一个前端开发人员,了解后端及数据库是学习工作的需要. LeanCloud直接登录,未注册直接创建账户.它是一款免费的线上数 ...

  5. WePY 在手机充值小程序中的应用与实践

    wepyjs 发布了两个月了,中间经历了很多版本更新,也慢慢开始有一些用户选择 wepyjs 作为开发框架来开发小程序,比如一些线上小程序. 以及一些来自网上的 wepyjs 的相关资源: demo源 ...

  6. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  7. 微信小程序中发送模版消息注意事项

    在微信小程序中发送模版消息 参考微信公众平台Api文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html#模版消息管理 此参考地址 ...

  8. 如何在原生微信小程序中实现数据双向绑定

    官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...

  9. JS 条形码插件--JsBarcode 在小程序中使用

    在小程序中的使用: utils文件夹下 barcode.js 粘粘以下代码 var CHAR_TILDE = 126 var CODE_FNC1 = 102 var SET_STARTA = 103 ...

随机推荐

  1. Visual Studio 2010 集成 SP1 补丁 制作 Visual Studio 2010 Service Pack 1 完整版安装光盘的方法

    Now that Visual Studio 2010 SP1 has been released, administrators and developers may wish to install ...

  2. springboot整合redis(简单整理)

    Redis安装与开启 我这里是在windows上练习,所以这里的安装是指在windows上的安装,操作非常简单,点击https://github.com/MicrosoftArchive/redis/ ...

  3. jmeter java requst请求

    https://wangym.iteye.com/blog/731729 http://www.cnblogs.com/yangxia-test/p/4019541.html https://blog ...

  4. 2018年—2019年第二学期第四周C#学习个人总结

    第五章面向对象高级包括:5.1类的继承中有5.1.1继承的概念:一是在现实生活中,继承一般指的是子女继承父辈的财产;在C#,类的继承是指在一个现有类的基础上去构建一个新的类,构建出来的新类被称作子类, ...

  5. Java静态代码块与非静态代码块

    静态代码块,格式是 static{ },随着类的加载而加载,且只执行一次. 在程序中,执行的优先级最高. 非静态代码块,格式是{ },在创建对象的时候运行(即new一个对象的时候),每创建一次对象就执 ...

  6. P4114 Qtree1

    思路 树剖一发,注意对LCA的处理 代码 #include <cstdio> #include <algorithm> #include <cstring> usi ...

  7. 查看 linux 目录大小

    查看 linux 目录大小 du -sm * | sort -n # 以m显示并按小到大排序 ​

  8. Python中常见的正则表达式符号

    ?  匹配零次或一次前面的分组 *   匹配零次或多次前面的分组 +  匹配一次或多次前面的分组 {n} 匹配n次前面的分组 {n,} 匹配n次或更多次前面的分组 {,m} 匹配零次到m次前面的分组 ...

  9. js对象跟数组多层嵌套,检测没有此数据就添加有则不添加以及超过限制条件删除操作

    例如你需要这样格式的数据: [{"name":"合肥市","arrey":[{"lat":"31.862323 ...

  10. Oracle中用户的创建和权限设置

    权限: CREATE SESSION --允许用户登录数据库权限 CREATE TABLE --允许用户创建表权限 UNLIMITED TABLESPACE --允许用户在其他表空间随意建表 角色: ...