小程序中通过判断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{
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)的更多相关文章
- 微信小程序中用户唯一ID的获取
折腾到半夜,搞得挺兴奋,总结一下,免得忘了: 1.微信小程序直接获得的是一些简单信息,基本无用 2.用户唯一标识是openid,还有一个unionid是关联多个公众号之类情况下用,我不大关心 3.在g ...
- 全栈开发工程师微信小程序-中(下)
全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...
- 全栈开发工程师微信小程序-中(中)
全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...
- 在微信小程序中使用LeanCloud(一)
之前学习了微信小程序前端,使用到LeanCloud线上数据库 [传送门].作为一个前端开发人员,了解后端及数据库是学习工作的需要. LeanCloud直接登录,未注册直接创建账户.它是一款免费的线上数 ...
- WePY 在手机充值小程序中的应用与实践
wepyjs 发布了两个月了,中间经历了很多版本更新,也慢慢开始有一些用户选择 wepyjs 作为开发框架来开发小程序,比如一些线上小程序. 以及一些来自网上的 wepyjs 的相关资源: demo源 ...
- 在微信小程序中使用富文本转化插件wxParse
在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...
- 微信小程序中发送模版消息注意事项
在微信小程序中发送模版消息 参考微信公众平台Api文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html#模版消息管理 此参考地址 ...
- 如何在原生微信小程序中实现数据双向绑定
官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...
- JS 条形码插件--JsBarcode 在小程序中使用
在小程序中的使用: utils文件夹下 barcode.js 粘粘以下代码 var CHAR_TILDE = 126 var CODE_FNC1 = 102 var SET_STARTA = 103 ...
随机推荐
- 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 ...
- springboot整合redis(简单整理)
Redis安装与开启 我这里是在windows上练习,所以这里的安装是指在windows上的安装,操作非常简单,点击https://github.com/MicrosoftArchive/redis/ ...
- jmeter java requst请求
https://wangym.iteye.com/blog/731729 http://www.cnblogs.com/yangxia-test/p/4019541.html https://blog ...
- 2018年—2019年第二学期第四周C#学习个人总结
第五章面向对象高级包括:5.1类的继承中有5.1.1继承的概念:一是在现实生活中,继承一般指的是子女继承父辈的财产;在C#,类的继承是指在一个现有类的基础上去构建一个新的类,构建出来的新类被称作子类, ...
- Java静态代码块与非静态代码块
静态代码块,格式是 static{ },随着类的加载而加载,且只执行一次. 在程序中,执行的优先级最高. 非静态代码块,格式是{ },在创建对象的时候运行(即new一个对象的时候),每创建一次对象就执 ...
- P4114 Qtree1
思路 树剖一发,注意对LCA的处理 代码 #include <cstdio> #include <algorithm> #include <cstring> usi ...
- 查看 linux 目录大小
查看 linux 目录大小 du -sm * | sort -n # 以m显示并按小到大排序
- Python中常见的正则表达式符号
? 匹配零次或一次前面的分组 * 匹配零次或多次前面的分组 + 匹配一次或多次前面的分组 {n} 匹配n次前面的分组 {n,} 匹配n次或更多次前面的分组 {,m} 匹配零次到m次前面的分组 ...
- js对象跟数组多层嵌套,检测没有此数据就添加有则不添加以及超过限制条件删除操作
例如你需要这样格式的数据: [{"name":"合肥市","arrey":[{"lat":"31.862323 ...
- Oracle中用户的创建和权限设置
权限: CREATE SESSION --允许用户登录数据库权限 CREATE TABLE --允许用户创建表权限 UNLIMITED TABLESPACE --允许用户在其他表空间随意建表 角色: ...