小程序中通过判断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 ...
随机推荐
- 第01节:ActiveMQ入门和消息中间件
1.ActiveMQ最主要的功能:实现JMS Provider,用来帮助实现高可用.高性能.可伸缩.易用和安全的企业级面向消息服务的系统.是一个异步的功能. 2.ActiveMQ特点: 完全支持JMS ...
- redis(一主两从三哨兵模式搭建)记录
转自:http://www.cnblogs.com/fly-piglet/p/9836314.html 目的: 让看看这篇文章的的人能够知道:软件架构.软件的安装.配置.基本运维的操作.高可用测试.也 ...
- workbench使用小笔记(不定期持续更新)
1. 删除不使用的工作空间 在使用workbench时,之前可能建了好几个工作空间,现在有一些不使用了,每次打开都能还能看到它们,对于强迫症来说多少有一些不爽.如下图: 现在,就把那些不使用的工作空间 ...
- shell的打印菜单
#!/bash/bin cat << EOF #EOF是变量,可随便设置,但标准是EOF 1)hello world. 2)你好,世界. EOF
- %zsy %lqs 随感
今天是cj的大毒瘤zsy(对对,您说的都对,题目不难的啦,是我太菜啦)出题. 我校选手lqs仍然坚持高水平的发挥,wzy神犇却不在状态. 面对T1sb题(其实干了2h)和T3的原题(我&lqs ...
- Spark大型电商项目实战-及其改良(4) 单独运行程序发现的问题
之前的运行结果比对发现,有1个函数的作用在2个job里面是相同的,但是对应的计算时间却差太远 于是把4个job分开运行.虽说使用的数据不同,但是生成数据的生成器是相同的,数据排布差距不大,数据量也是相 ...
- luogu准备复习(学习)题单
矩阵乘法 P1306 exbsgs P4195 网络流(割点) P1345 主席树 P3302
- Vue-admin工作整理(九): 状态管理Vuex-state和getters
前提:通过项目结构个人设置创建的项目 store文件下actions.js.mutations.js.state.js都是根级别的状态管理,引用入口是通过index.js来实现,整个Vuex处理逻辑为 ...
- Python中常见的正则表达式符号
? 匹配零次或一次前面的分组 * 匹配零次或多次前面的分组 + 匹配一次或多次前面的分组 {n} 匹配n次前面的分组 {n,} 匹配n次或更多次前面的分组 {,m} 匹配零次到m次前面的分组 ...
- sql学习书籍
SQL 入门 在准备成为MySQL DBA之前,能熟练的编写SQL是一个必要条件.exists 和 join之间的等价转换:基本的行列转换:SQL 循环等的熟练掌握对之后的运维和调优工作都有很大的帮助 ...