Angular+ionic实现折叠展开效果的示例代码


Posted in Javascript onJuly 29, 2020

1,html中

<ion-item>
  <div class="middle-content-order">
   <div class="middle-order-icon">
    <ion-icon name="chevron-up-outline" class="up-gray" item-right *ngIf="!isShow" (click)="isShow=!isShow">
    </ion-icon>
    <ion-icon name="chevron-down-outline" class="down-gray" item-right *ngIf="isShow" (click)="isShow=!isShow">
    </ion-icon>
   </div>
   <div class="middle-order-title"><span>复印纸</span></div>
   <div class="middle-order-null"></div>
   <div class="middle-order-detail"><span>查看全部</span></div>
 </div>
 </ion-item>
  <ion-list *ngIf="!isShow">
   <div class="order-alert">
    <div class='item-small'>
    <span> A3复印纸</span>
    </div>
    <div class='item-small'>
     <span> A3复印纸</span>
    </div>
    <div class='item-small'>
     <span> A3复印纸</span>
    </div>

    <div class='item-small'>
     <span> A3复印纸</span>
    </div>
    <div class='item-small'>
     <span> A3复印纸</span>
    </div>
    <div class='item-small'>
     <span> A3复印纸</span>
    </div>
    
   </div>
  </ion-list>

效果图

Angular+ionic实现折叠展开效果的示例代码

下面看下ionic3 模拟下拉 展开/收缩效果

Angular+ionic实现折叠展开效果的示例代码

<ion-header>
 <ion-navbar>
 <ion-title>user</ion-title>
 </ion-navbar>
</ion-header>
<ion-content>
 
<ion-item>
 用户信息
<ion-icon name="ios-arrow-down" item-right *ngIf="isShow" (click)="isShow=!isShow"></ion-icon>
<ion-icon name="ios-arrow-forward" item-right *ngIf="!isShow" (click)="isShow=!isShow"></ion-icon>
 </ion-item>
 <ion-list *ngIf="isShow">
  <ion-item *ngFor="let item of items" >
   姓名:{{item.name}} 年龄:{{item.age}}
  </ion-item>
 </ion-list>
</ion-content>

到此这篇关于Angular+ionic实现折叠展开效果的示例代码的文章就介绍到这了,更多相关Angular+ionic实现折叠展开内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript的Function详细
Nov 14 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
JS父页面与子页面相互传值方法
Mar 05 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
Vue 监听元素前后变化值实例
Jul 29 #Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 #Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 #Javascript
小程序实现列表展开收起效果
Jul 29 #Javascript
jquery实现简单自动轮播图效果
Jul 29 #jQuery
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 #Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 #Javascript
You might like
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
php中请求url的五种方法总结
2017/07/13 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
python实现dict版图遍历示例
2014/02/19 Python
Python下Fabric的简单部署方法
2015/07/14 Python
全面了解python中的类,对象,方法,属性
2016/09/11 Python
详解python基础之while循环及if判断
2017/08/24 Python
django Serializer序列化使用方法详解
2018/10/16 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
python如何导入依赖包
2020/07/13 Python
用 python 进行微信好友信息分析
2020/11/28 Python
韩国现代百货官网:Hmall
2018/03/21 全球购物
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
简短证婚人证婚词
2014/01/09 职场文书
迟到检讨书5000字
2014/01/31 职场文书
电焊工岗位职责
2014/03/06 职场文书
班级体育活动总结
2014/07/05 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android
Django框架之路由用法
2022/06/10 Python