如何结合“离子段”和“滑动”以使用“离子反应”制作可滑动的标签？

问题描述

我是Ionic的新手，在将IonSegment和IonSlides组合到Ionic-React应用程序中时遇到问题。互联网上没有太多资源，尤其是与Ionic和React一起使用时。如何获得幻灯片内容的索引（在本例中为Card组件），该索引也将内容更改到下一个细分市场（从Market到My Package，反之亦然）。还是有更好的方法来实现这一目标？ 这是下面的代码。

import React,{ useState } from 'react';
import {IonSegment,IonSegmentButton,IonRow,IonCol,IonGrid,IonContent,IonSlides,IonSlide,IonHeader,IonPage,IonTitle,IonToolbar,IonButtons,IonMenuButton,IonSearchbar} from '@ionic/react';
import Card from '../components/Card';
//import Segment from '../components/Segment';
const Market: React.FC = () => {

  const [searchText,setSearchText] = useState('');

  const slideOpts = {
    initialSlide: 0,speed: 400,loop: false,pagination: {
      el: null
    },};

 
return (
<IonPage>

<IonHeader>
  <IonToolbar>
    <IonButtons slot="start">
      <IonMenuButton />
    </IonButtons>
    <IonTitle>Market</IonTitle>
  </IonToolbar>
</IonHeader>

<IonHeader>
        <IonToolbar>
          <IonTitle>Search Package</IonTitle>
          <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)}></IonSearchbar>
          {/*-- Segment in a toolbar --*/}
          <IonSegment onIonChange={e => console.log('Segment selected',e.detail.value)}>
            <IonSegmentButton value="market">
              <IonTitle>Market</IonTitle>
            </IonSegmentButton>
            <IonSegmentButton value="mypackage">
              <IonTitle>My Package</IonTitle>
            </IonSegmentButton>
          </IonSegment>
        </IonToolbar>
      </IonHeader>
      
      <IonContent>
      {/*-- Market Segment --*/}
      <IonSlides pager={true} options={slideOpts}>
      <IonSlide>
      <IonGrid>
      <IonRow>
        <IonCol><Card/></IonCol>
        <IonCol><Card/></IonCol>
        <IonCol><Card/></IonCol>
      </IonRow>
      </IonGrid>
      </IonSlide>
      {/*-- Package Segment --*/}
      <IonSlide>
      <IonGrid>
      <IonRow>
        <IonCol><Card/></IonCol>
        <IonCol><Card/></IonCol>
        <IonCol><Card/></IonCol>
        <IonCol><Card/></IonCol>
      </IonRow>
      </IonGrid>
      </IonSlide>
    </IonSlides>
  </IonContent>
</IonPage>
)
}

export default Market;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）