Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件

小鱼儿 2021-12-10 05:03 315阅读 0赞

**Slides 轮播图组件  
Ionic4.x 中的轮播图组件是基于 swiper 插件，所以配置 slides 的属性需要在 swiper 的 api 中**

找  
Swiper Api:http://idangero.us/swiper/api/

<ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button defaultHref="/tabs/tab1" text="返回"></ion-back-button>
        </ion-buttons>
        <ion-title>slides</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content padding>
      <ion-slides pager="true" [options]="slideOpts" #slide1 (ionSlideTouchEnd)="slideDidChange()">
        <ion-slide>
          <img src="/assets/slide01.png" alt="">
        </ion-slide>
        <ion-slide>
          <img src="/assets/slide02.png" alt="">
        </ion-slide>
      </ion-slides>
      <br>
      <ion-slides pager="true" #slide2>
        <ion-slide>
          <img src="/assets/slide02.png" alt="">
        </ion-slide>
        <ion-slide>
          <img src="/assets/slide01.png" alt="">
        </ion-slide>
        <ion-slide>
          <img src="/assets/02.png" alt="">
        </ion-slide>
        <ion-slide>
          <img src="/assets/02.png" alt="">
        </ion-slide>
      </ion-slides>
      <ion-button (click)="slideNext()">
        点击按钮跳转到下一页
      </ion-button>
      <ion-button (click)="slidePrev()">
        点击按钮跳转到上一页
      </ion-button>
    </ion-content>

Searchbar 组件

<ion-header>
      <ion-toolbar>
          <ion-buttons slot="start">
              <ion-back-button defaultHref="/tabs/tab1" text="返回"></ion-back-button>
          </ion-buttons>
      </ion-toolbar>
    </ion-header>
    
    <ion-content padding>
        <ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
        <ion-searchbar placeholder="请输入搜索的内容" animated></ion-searchbar>
        <ion-searchbar placeholder="请输入搜索的内容" animated type="number"></ion-searchbar>
        <ion-searchbar placeholder="请输入搜索的内容" animated  color="success"></ion-searchbar>
        <ion-searchbar placeholder="文本框改变" debounce="500" (ionChange)="doChange()"></ion-searchbar>     
    </ion-content>

<ion-header>
      <ion-toolbar>
    
          <ion-buttons slot="start">
              <ion-back-button defaultHref="/tabs/tab1" text="返回"></ion-back-button>
          </ion-buttons>
        <ion-title>segment</ion-title>
      </ion-toolbar>
    </ion-header>
    
    <ion-content padding>
    
    
        <ion-segment [(ngModel)]="tab">
          <ion-segment-button value="tab1">
            <ion-label>简介</ion-label>
          </ion-segment-button>
          <ion-segment-button value="tab2">
            <ion-label>详情</ion-label>
          </ion-segment-button>
          <ion-segment-button value="tab3">
              <ion-label>评论</ion-label>
            </ion-segment-button>
        </ion-segment>
    
        <div class="info" [ngSwitch]="tab">
    
          <div *ngSwitchCase="'tab1'">
              商品简介   --注意ngSwitchCase写法
          </div>
    
          <div  *ngSwitchCase="'tab2'">
              商品详情
    
          </div>
          <div  *ngSwitchCase="'tab3'">
            商品评论     
          </div>
        </div>
    </ion-content>

转载于:https://www.cnblogs.com/loaderman/p/10956629.html