欢迎加入小程序交流群:本群定期更新在工作种遇到的小知识(交流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. Can't locate Params/Validate.pm in @INC (@INC contains: /usr/local/lib64/perl5 /

    今天 安装 MHA,管理节点选 mha4mysql-manager-0.58,在初始化时报错 [root@Server3 ~]# masterha_check_repl  --conf=/etc/ma ...

  2. JS 页面表格的操作

    var showObj = null;var arr = [ ['编号','姓名','性别','年龄','备注','操作'], ['1','lisi','nan','12','66666'], ['2 ...

  3. LeetCode Weekly Contest 118

    要死要死,第一题竟然错误8次,心态崩了呀,自己没有考虑清楚,STL用的也不是很熟,一直犯错. 第二题也是在室友的帮助下完成的,心态崩了. 970. Powerful Integers Given tw ...

  4. Ubuntu 无界面使用selenium chrome + headless

    1. 安装 selenium : sudo pip install selenium 2. 安装 chromdriver: 进入 淘宝镜像源 下载 chromdriver, 可以查看 notes.tx ...

  5. TreeMap,HashMap,LinkedHashMap区别,很简单解释

    TreeMap,HashMap,LinkedHashMap之间的区别和TreeSet,HashSet,LinkedHashSet之间的区别相似. TreeMap:内部排序. HashMap:无序. L ...

  6. 软件测试1gkd

        通过老师课上的讲解以及对书本和百度百科的学习,我对软件测试有如下的理解.     软件开发的最基本要求是按时.高质量地发布软件产品,而软件测试是软件质量保证的最重要的手段之一.在整个软件生命周 ...

  7. 王之泰201771010131《面向对象程序设计(java)》第十四周学习总结

    第一部分:理论知识学习部分 第12章 Swing用户界面组件 12.1.Swing和MVC设计模式 a 设计模式初识b 模型—视图—控制器模式c Swing组件的模型—视图—控制器分析 12.2布局管 ...

  8. 解决pycharm输入法不跟随的方法

    先上图,这个pycharm编辑器默认条件下输入中文时输入法框的状态 这个是更改后的状态 修改方法就是将android studio中的jre目录 拷贝至 下,并更改名称为jre64 重新启动pycha ...

  9. WEB API 系列(二) Filter的使用以及执行顺序

    在WEB Api中,引入了面向切面编程(AOP)的思想,在某些特定的位置可以插入特定的Filter进行过程拦截处理.引入了这一机制可以更好地践行DRY(Don’t Repeat Yourself)思想 ...

  10. xls文件导入数据库

     protected void btn_ok_Click(object sender, EventArgs e)     {         int num = 0;                  ...