快捷導(dǎo)航

Angular+ionic實(shí)現(xiàn)折疊展開(kāi)效果的示例代碼

更新時(shí)間：2020年07月29日 15:21:35 作者：會(huì)做夢(mèng)的辣條魚

這篇文章主要介紹了Angular+ionic實(shí)現(xiàn)折疊展開(kāi)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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>復(fù)印紙</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復(fù)印紙</span>
    </div>
    <div class='item-small'>
     <span> A3復(fù)印紙</span>
    </div>
    <div class='item-small'>
     <span> A3復(fù)印紙</span>
    </div>

    <div class='item-small'>
     <span> A3復(fù)印紙</span>
    </div>
    <div class='item-small'>
     <span> A3復(fù)印紙</span>
    </div>
    <div class='item-small'>
     <span> A3復(fù)印紙</span>
    </div>
    
   </div>
  </ion-list>

效果圖

在這里插入圖片描述

下面看下ionic3 模擬下拉展開(kāi)/收縮效果

<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>

到此這篇關(guān)于Angular+ionic實(shí)現(xiàn)折疊展開(kāi)效果的示例代碼的文章就介紹到這了,更多相關(guān)Angular+ionic實(shí)現(xiàn)折疊展開(kāi)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

簡(jiǎn)述Angular 5 快速入門
這篇文章主要介紹了簡(jiǎn)述Angular 5 快速入門，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
詳解AngularJS實(shí)現(xiàn)表單驗(yàn)證
這篇文章主要介紹了AngularJS實(shí)現(xiàn)表單驗(yàn)證，客戶端表單驗(yàn)證是AngularJS里面最酷的功能之一。AngularJS表單驗(yàn)證可以讓你從一開(kāi)始就寫出一個(gè)具有交互性和可相應(yīng)的現(xiàn)代HTML5表單，對(duì)AngularJS表單驗(yàn)證感興趣的小伙伴們可以參考一下
2015-12-12
淺談Angular的12個(gè)經(jīng)典問(wèn)題
Angular作為目前最為流行的前端框架，受到了前端開(kāi)發(fā)者的普遍歡迎。不論是初學(xué)Angular的新手，還是有一定Angular開(kāi)發(fā)經(jīng)驗(yàn)的開(kāi)發(fā)者，了解本文中的12個(gè)經(jīng)典面試問(wèn)題，都將會(huì)是一個(gè)深入了解和學(xué)習(xí)Angular2的知識(shí)概念的絕佳途徑。
2021-05-05
深入理解Angular.JS中的Scope繼承
這篇文章主要給大家深入的介紹了關(guān)于Angular.JS中Scope繼承的相關(guān)資料，Angular。JS中scope之間的繼承關(guān)系使用JavaScript的原型繼承方式實(shí)現(xiàn)，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-06-06
angular實(shí)現(xiàn)IM聊天圖片發(fā)送實(shí)例
本篇文章主要介紹了angular實(shí)現(xiàn)IM聊天圖片發(fā)送實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
AngularJS 文件上傳控件 ng-file-upload詳解
這篇文章主要介紹了AngularJS 文件上傳控件 ng-file-upload詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-01-01
AngularJS實(shí)現(xiàn)根據(jù)不同條件顯示不同控件
本篇文章主要介紹了AngularJS實(shí)現(xiàn)根據(jù)不同條件顯示不同控件的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-04-04
Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法示例
這篇文章主要介紹了Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法,結(jié)合實(shí)例形式分析了Angular基于外部JS調(diào)用控制器中方法與變量的具體實(shí)現(xiàn)步驟與相關(guān)技巧,需要的朋友可以參考下
2016-08-08
Angular Renderer (渲染器)的具體使用
這篇文章主要介紹了Angular Renderer (渲染器)的具體使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
AngularJS基礎(chǔ) ng-disabled 指令詳解及簡(jiǎn)單示例
本文主要介紹AngularJS ng-disabled 指令,這里幫大家整理了ng-disabled指令的基礎(chǔ)指令,并附示例代碼,有需要的小伙伴參考下
2016-08-08