プロジェクト#1|Motivation Diary#2

7206 ワード
TIL 開発ログ プロジェクト WeCode テキストリンク

- TODAY I LEARN ERROR 🦠

  • 今日直面している問題
    本プロジェクトの私たちのチームが担当しているサイトはhttps://thisisneverthat.com/です.私はその中でホームページを担当して、豪快にコードを始めて、基本的な形態まで比較的に速いです.次に、スクロール位置に伴う画像の変化を示します.

    • - HOW TO FIX MY ERROR 💊


    KEYWORDは
  • ERRORを解決した🔑
    この部分を最大限に自分の力で表現するために、翌日は頑張りましたが、やはり自分の実力では表現するのは難しいと思います.3日目の今日、私たちは指導者のアドバイスを聞いて、戦略を修正して、スライドを実施する計画を変えました.

    • -私が実施した部分



    -学んだこと


    実施方法
    class ImageSlide extends Component {
  constructor() {
    super();
    this.state = {
      imagePosition: 0,
    };
  }

  changeImageToLeft = position => {
    const slideLength = this.props.images.length;
    let newPosition = position - 1;
    let maxPosition;

    if (window.innerWidth > 1140) {
      maxPosition = Math.ceil((slideLength - 4) / 2); // 큰 화면용
    } else {
      maxPosition = Math.ceil(slideLength - 2); // 작은 화면용
    }
    if (newPosition < 0) newPosition = maxPosition; // 오른쪽 최대치 넘어가면 제일 왼쪽으로 되돌림

    this.setState({
      imagePosition: newPosition,
    });
  };
// changeImageToRight 생략

render() {
    const { products } = this.props;
    return (
      <div
        style={{transform:`translate3d(${this.state.imagePosition * -50}vw, 0px, 0px`,}}
	>         // position*50 만큼 왼쪽으로 슬라이드를 민다
        <img />
      </div>
    );
   }
  }

    -改善すべき点

  • 下部テキストリンクが小さくなる境界オーバーラップ問題
  • 問題
    • スライドが小さくなると最後の画像が表示されなくなります

    -目標および締切日:2021～10-06

  • 以上の2つの問題と再包装は水曜日までに完了します.
    • オブジェクト向けの4つのプロパティ(4):パッケージ(2)
    JJJWTの概要