欢迎加入小程序交流群:本群定期更新在工作种遇到的小知识(交流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. 996.icu,不加班的程序员有前途吗?

    一.有没有不加班的程序员? 有,我就是. 我目前工作与一家500强外企(欧美),职称为高级软件开发专家. 我在这家公司(500强外企)已经服务了10年,所有加班次数合起来不超过10天,最近3年则一次都 ...

  2. MySQL5.7 并行复制的学习

    MySQL 5.6 基于库级别的并行复制 MySQL5.6的并行复制是库(schema)级别的,从库为每个库(schema)分配一个线程以此来提高复制效率 在MySQL 5.6版本之前,Slave服务 ...

  3. WinForm 绑定到嵌套对象上的属性

    WinFrom 绑定到嵌套对象上的属性 关键字: Windows Forms, DataBindings, Nested Class, 嵌套类 在 WinForm 中很早就已经支持数据绑定, 使用数据 ...

  4. d3-tip中show在自己调用时需要改变this值

    <script src="https://d3js.org/d3.v4.min.js"></script><script src="http ...

  5. 容器中的诊断与分析4——live diagnosis——LTTng

    官网地址 LTTng 简介&使用实战 使用LTTng链接内核和用户空间应用程序追踪 简介: LTTng: (Linux Trace Toolkit Next Generation),它是用于跟 ...

  6. pycharm使用selenium之前

    2.python安装好后,查看你的pycharm输出控制台,第一行就写了你所使用的python.exe的路径,如下图箭头处所示: 检查python使用的是不是你刚刚安装的,如果不是,换成你刚刚安装的p ...

  7. leecode第二百三十一题(2的幂)

    class Solution { public: bool isPowerOfTwo(int n) { bool is_flag=false; ) { ==)//如果为1,看是不是第一个1 { if( ...

  8. vuex的学习和理解

    初识Vuex: vuex是 vue官方推荐的一个状态管理器,也是vue专用的一个插件.当我们遇到很多状态改变时,组件之间的通信就会变得复杂,这时候vuex的强大就体现出来了. Vuex 应用的核心就是 ...

  9. [数据结构] P2.3 Trie树

    1.Trie树的概念 Trie树也叫做`字典树`或者`单词查找树`.用于字符串以及字符串元信息的快速查询. 例如:

  10. Apache Hadoop学习笔记一

    官网:http://hadoop.apache.org/ 1 什么是Hadoop? Apache™Hadoop®项目开发了用于可靠,可扩展的分布式计算的开源软件. Apache Hadoop软件库是一 ...