Mandarin-market - 2

改造する

前の文章では、徐々にポイント表示モードが体現され、ログアウト表示モードを選択してもう一つのモードを表示します.

Navにはfixed属性が付与され、以下のモードでは、Navにはabsolute属性が付与され、髪の毛のような移動が実現される.しかし機能が増加するにつれて素子に分離することも難しくなり再実現した.

    <section>
      <Nav>
        <button>
          <ArrowBackIcon className="arrow" />
        </button>
        <button onClick={openMyProfileModal}>
          <MoreVertIcon className="more" />
        </button>
      </Nav>
      <MyProfileInfo />
      <MyProfileInfo />
      <Background
        className={`${myProfileModal}`}
        onClick={closeMyProfileModal}
      ></Background>
      <MyProfileModal
        myProfileModal={myProfileModal}
        openLogoutModal={openLogoutModal}
      />
      {logoutModal && <LogOutModal closeLogoutModal={closeLogoutModal} />}
    </section>

NavのModalは今外で使えます.動作全体がそうです.徐々に、1つのポイントをクリックすると、基準fixed単位のモードが現れ、スクリーンを灰色に覆うBackgroundが現れます.モードでは、「設定と個人情報」または「ログアウト」を選択せず、グレーの部分をクリックするとモードが消え、グレーの背景も消えます.

ログアウトをクリックすると、途中にモードウィンドウが表示されます.反応型設計を考慮すると,スクリーンサイズにかかわらず中央に位置する.

今日の実施

売れ残り商品

他の人のプロファイルに入ると、販売しているカタログを表示する部分を実現したいと思っています.

まず結果を見ようボタンで写真を移動する会所に設計されています.

  const ProData = [
    {
      id: 0,
      src: "https://cdn.pixabay.com/photo/2014/04/07/02/42/clementines-318210_1280.jpg",
      href: "1",
      title: "애월읍 노지 감귤",
      price: "35,000원",
    },
    {
      id: 1,
      src: "https://cdn.pixabay.com/photo/2015/11/24/06/53/hallabong-1059550_1280.jpg",
      href: "2",
      title: "애월읍 한라봉 10kg 당도 최고",
      price: "45,000원",
    },
    {
      id: 2,
      src: "https://cdn.pixabay.com/photo/2018/12/06/21/31/mandarins-3860659_1280.jpg",
      href: "3",
      title: "감귤 파치",
      price: "25,000원",
    },
  ];

バックアップセグメントはまだありませんが、このようにデータがインポートされる可能性があるため、事前にスタックデータが生成されます.map関数を使用する場合、idはキー値として挿入されます.(データベースは自動的に存在します)

      <CarouselContainer>
        <CarouselItem index={caroucelIndex}>
          {ProData.map((s) => {
            return (
              <div key={`carousel-${s.id}`}>
                <Link href={s.href}>
                  <a>
                    <Img src={s.src} alt="" />
                  </a>
                </Link>
                <CarouselTitle>{s.title}</CarouselTitle>
                <CarouselPrice>{s.price}</CarouselPrice>
              </div>
            );
          })}
        </CarouselItem>
      </CarouselContainer>

CarouselContainerにoverflow: hidden;を加え、CarouselItemで遷移とボタンをクリックすると位置の部分${caroucelIndex}が変わります.const [caroucelIndex, setCaroucelIndex] = useState(0);でボタンを押してインデックス値を制御します.この値を用いて現在のキャッシュセル位置を表示する部分は${caroucelIndex}である.

const caroucelIndex = (props: IndexTypeProps) => css`
  transform: translateX(-${150 * props.index}px);
`;

同様に、caroucelIndexはpropsを受信し、cssを適用している.

const CarouselTitle = styled.p`
  font-size: 14px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 140px;
  height: 20px;
`;

商品のタイトルが長くなると….表示のために、text-overflow属性が付与されている.これでサンタクロースも完成

に質問

しかし、一つ問題があります.

これはケラッセルがNavの上に位置している問題です.

モダルをよく隠していましたがNavはできませんでした.

const caroucelIndex = (props: IndexTypeProps) => css`
  transform: translateX(-${150 * props.index}px);
`;

コードを分析したところ、この部分が原因であることが分かった.propsを使う問題かもしれないので、transform属性を削除してみましたが、そうではありません.translateXのせいかと思ってscale(2)に変更したらtransformの問題でした.z-indexを使ってみましたが、解決しませんでした.
もう一度考えてから解決しなければなりません.