📌  相关文章
📜  ionic 段

📅  最后修改于: 2021-01-03 04:56:10             🧑  作者: Mango

ionic 段

段是在水平行中显示的相关按钮的集合。可以将其放置在工具栏或主要内容内。 Ionic段的功能与Ionic选项卡相同，在其中选择一个选项卡将取消选择所有其他选项卡。

当用户在内容内部的不同视图之间切换时，细分组件非常有用。单击控件时，应使用选项卡栏而不是句段，应在应用程序的页面之间导航。段可以充当过滤器，该过滤器根据段的值显示或隐藏元素。我们可以使用标准的元素访问 ionic 段。

以下示例详细说明了如何在Ionic应用程序中使用段。

例

Home.page.html

此页面用于显示用户视图的内容。在这里，我们将在元素内使用。段中的选项(例如ionChange )调用事件以更改段选项卡，而ngModel是一个角度指令，它将HTML控件的值绑定到应用程序数据。


  
    
      
    
    Ionic Segment
  



  
    
      
        Contact
        
      
      
        Camera
        
      
      
        Map
        
      
    
  
  
  
    First Segment
    Second Segment
    Third Segment

主页

该页面包含用于更改细分标签和幻灯片选项的代码。

import { Component, ViewChild} from '@angular/core';
import {IonSlides } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  @ViewChild('slides', { static: true }) slider: IonSlides;
  segment = 0;
  constructor() { }
  async segmentChanged(ev: any) {
    await this.slider.slideTo(this.segment);
  }
  async slideChanged() {
    this.segment = await this.slider.getActiveIndex();
  }
}

Home.page.scss

:root {
  --ion-safe-area-top: 20px;
  --ion-safe-area-bottom: 22px;
}
ion-slide {
  height: calc(100vh - 140px);
}

输出量

当您执行上述Ionic应用程序时，将提供以下输出。在这里，您可以看到细分受众群联系人，相机和地图的三种类型。默认情况下，始终选择第一段。

现在，当您选择地图线段时，屏幕上将显示以下输出。