快捷導(dǎo)航

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

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

這篇文章主要介紹了Angular+ionic實(shí)現(xiàn)折疊展開效果，本文通過(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 模擬下拉展開/收縮效果

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

您可能感興趣的文章:

相關(guān)文章

AngularJS上拉加載問(wèn)題解決方法
這篇文章主要介紹了AngularJS上拉加載問(wèn)題解決方法的相關(guān)資料,該問(wèn)題在項(xiàng)目中一直存在，小編給大家分享解決辦法，需要的朋友可以參考下
2016-05-05
angular 動(dòng)態(tài)組件類型詳解(四種組件類型)
這篇文章給大家講解四種組件類型，非常不錯(cuò)，具有參考借鑒價(jià)值，對(duì)angular 動(dòng)態(tài)組件類型感興趣的朋友參考下吧
2017-02-02
AngularJS模板加載用法詳解
這篇文章主要介紹了AngularJS模板加載用法,結(jié)合實(shí)例形式詳細(xì)分析了AngularJS模板加載所涉及的屬性、方法、使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2016-11-11
使用AngularJS創(chuàng)建單頁(yè)應(yīng)用的編程指引
這篇文章主要介紹了使用AngularJS創(chuàng)建單頁(yè)應(yīng)用的編程指引,AngularJS是一款高人氣的JavaScript庫(kù),需要的朋友可以參考下
2015-06-06
Angular實(shí)現(xiàn)的進(jìn)度條功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)的進(jìn)度條功能,結(jié)合實(shí)例形式較為詳細(xì)的分析了angular進(jìn)度條功能的相關(guān)界面布局、功能等操作技巧,需要的朋友可以參考下
2018-02-02
如何創(chuàng)建AngularJS?模塊
AngularJS是一個(gè)強(qiáng)大的前端框架,其模塊化架構(gòu)提供了高度的靈活性和可維護(hù)性,本文探討了AngularJS中模塊的概念,包括定義、用途及創(chuàng)建和配置方法,感興趣的朋友跟隨小編一起看看吧
2024-09-09
angular 實(shí)現(xiàn)同步驗(yàn)證器跨字段驗(yàn)證的方法
幾乎每個(gè)web應(yīng)用都會(huì)用到表單，那么驗(yàn)證器就是必不可少的東西，這篇文章主要介紹了angular 實(shí)現(xiàn)同步驗(yàn)證器跨字段驗(yàn)證的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-04-04
這篇文章主要給大家介紹了關(guān)于Angular 4.x+Ionic3踩坑之Ionic 3.x界面?zhèn)髦档南嚓P(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2018-03-03