IonSlides 在 lastSLide 上渲染一些东西。离子反应

Question

我想在到达最后一张幻灯片时动态显示我的按钮，但它似乎不起作用。

我正在尝试使用 FindIndex 查找实际上位于最后一张幻灯片上的一些文本，但没有任何反应

控制台打印出 4 因为我在数组中有 5 项是正确的，但我无法将某些内容渲染到 dom

如果 IonSlides Component 本身有任何其他选项，我将不胜感激，因为 ionic 提供的 onSlideReachEnd 事件不起作用。

  const lastIndex = slideContent.findIndex((element) => {
    if (element.slideTitle === "Safe & Secure") {
      return true;
    }
    return false;
  });

  console.log(lastIndex); // 4

  return (
    <IonPage>
      <div className="content">
        <IonSlides pager={true} options={slideOpts}>
          {slideContent.map((slide, idx) => (
            <IonSlide key={idx}>
              <div>
                <img
                  src={slide.slideImage}
                  alt={slide.slideAltText}
                  className={slide.slideClassName}
                />
                <IonText>
                  <h5 className="mb-1 fw-bold">{slide.slideTitle}</h5>
                </IonText>
                <IonText color="primary" className="fw-bold">
                  <h4 className="mt-0 bold h4"> {slide.slidePrimaryText} </h4>
                </IonText>
                <div className="pt-0 px-5 pb-4">
                  <IonText>
                    <h6 className="fs-md mb-6 line-h fw-sm fw-reg tet-color">
                      {slide.slideText}
                      {slide.slideSecoundaryText && (
                        <IonText color="primary" className="fw-bold ">
                          <h6 className="mt-0 fs-md bold mt-3">
                            {slide.slideSecondaryText}
                          </h6>
                        </IonText>
                      )}
                    </h6>
                  </IonText>

                  {slide.slideBtn && (
                    <IonButton
                      shape="round"
                      fill="clear"
                      className="btn f-inherit"
                      size="small"
                    >
                      Stuff
                    </IonButton>
                  )}

                  {idx}
                </div>
              </div>
            </IonSlide>
          ))}
        </IonSlides>
      </div>

      {lastIndex && (
        <div className="ion-padding">
          <IonGrid>
            <IonRow>
              <IonCol size="6">
                <IonButton
                  expand="block"
                  className="btn"
                  size="small"
                  onClick={() => navigate("/login", "forward")}
                >
                  Login
                </IonButton>
              </IonCol>
              <IonCol size="6">
                <IonButton
                  expand="block"
                  fill="outline"
                  onClick={() => navigate("/get-started", "forward")}
                  className="btn"
                  size="small"
                >
                  Get Started
                </IonButton>
              </IonCol>
            </IonRow>
          </IonGrid>
        </div>
      )}
    </IonPage>

);

Answer 1

const SlidePage = () => {
  const [isLastSlide, setIsLastSlide] = useState();

  const slideChanged = async e => {
    const r = await e.target.isEnd();
    setIsLastSlide(r);
    console.log("isEnd", r);
  };

  return (
    <IonPage>
      <IonContent>
        <IonSlides pager={true} onIonSlideDidChange={slideChanged}>
          <IonSlide>
            <h1>Slide 1</h1>
          </IonSlide>
          <IonSlide>
            <h1>Slide 2</h1>
          </IonSlide>
          <IonSlide>
            <h1>Slide 3</h1>
          </IonSlide>
        </IonSlides>
        {isLastSlide && <h1 style={{ textAlign: "center" }}>IS LAST SLIDE</h1>}
      </IonContent>
    </IonPage>
  );

监听幻灯片更改事件，如果是最后一张幻灯片则更新状态。

onIonSlideDidChange

stackblitz 上的工作示例 - https://stackblitz.com/edit/react-w5gawb?file=src%2FApp.js

IonSlides 在 lastSLide 上渲染一些东西。离子反应

IonSlides render something on lastSLide. Ionic React

javascript

reactjs

ionic-framework

ionic5