Question

我想添加更多数量的标签，是否有任何解决方案可以在这些标签上滑动？

<ion-segment [(ngModel)]="query" (ionChange)="showdata()">
<ion-segment-button value="slide1">
 TabTitle1
</ion-segment-button>
<ion-segment-button value="slide2">
 TabTitle2
</ion-segment-button>
<ion-segment-button value="slide3">
 TabTitle3
</ion-segment-button>
</ion-segment>

Answer 1

在CSS下面添加，这将有效

供参考： - https://github.com/driftyco/ionic/issues/7202

  public function updateCart()
{
    $i = 0;
    foreach ($this->cart->contents() as $item) {

        $qty1 = count($this->input->post('qty'));
        //    print_r($qty1);
        //$i=1;
        for ($i = 0; $i < $qty1; $i++) {
            echo $_POST['qty'][$i];
            echo $_POST['rowid1'][$i];
            $data = array('rowid' => $_POST['rowid1'][$i], 'qty' => $_POST['qty'][$i]);
            $this->cart->update($data);
        }
       // $this->load->view('cart');

    }
    redirect('Shoppingcart/viewcart');
}

Answer 2

您可以尝试使用ion-scroll。

<ion-scroll scrollX=true>
<ion-segment [(ngModel)]="query" (ionChange)="showdata()">
<ion-segment-button value="slide1">
 TabTitle1
</ion-segment-button>
<ion-segment-button value="slide2">
 TabTitle2
</ion-segment-button>
<ion-segment-button value="slide3">
 TabTitle3
</ion-segment-button>
</ion-segment> 
</ion-scroll>

Answer 3

[重复Ionic - how to slide ion-segments?

简单易用的逻辑甚至只存在于html中，不需要JS自定义代码。

清洁，仅使用离子功能。您可以实现监听1个变量segment

的离子滑动和离子分段

工具栏：绑定到片段，并收听ionChange

<ion-toolbar>
    <ion-segment (ionChange)="slides.slideTo(segment)" [(ngModel)]="segment"  color="warning">
      <ion-segment-button value="0">
        <ion-icon name="person"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="1">
        <ion-icon name="camera"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

离子幻灯片：捕获幻灯片事件，将片段分配给当前活动索引

 <ion-slides #slides (ionSlideWillChange)="segment=''+slides.getActiveIndex()">
   <ion-slide>
     profile,
     hello <span *ngIf="this.userProvider.userData">{{this.userProvider.userData.name}}</span>

   </ion-slide>
   <ion-slide>
     second

   </ion-slide>
   <ion-slide>
     third

   </ion-slide>
 </ion-slides>

如何在离子2中制作可转换的分段标签？

3 个答案: