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之旅 对象的原型链之由来
Aug 25 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
webpack打包js的方法
Mar 12 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
从原生JavaScript到React深入理解
Jul 23 Javascript
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下MYSQL limit的优化
2008/01/10 PHP
php笔记之:文章中图片处理的使用
2013/04/26 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
Python的迭代器和生成器
2015/07/29 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
postman和python mock测试过程图解
2020/02/22 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
Django中template for如何使用方法
2021/01/31 Python
校园活动策划方案
2014/06/13 职场文书
预备党员转正材料
2014/12/19 职场文书
倡议书的格式写法
2015/04/28 职场文书
六年级语文教学反思
2016/03/03 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书