Ngx-drag-scroll: indexChanged/moveRight λ©”μ„œλ“œκ°€ μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

에 λ§Œλ“  2018λ…„ 09μ›” 17일  Β·  10μ½”λ©˜νŠΈ  Β·  좜처: bfwg/ngx-drag-scroll

  • μ œμΆœν•©λ‹ˆλ‹€...

    • [x] 버그 λ³΄κ³ μ„œ
    • [ ] κΈ°λŠ₯ μš”μ²­
    • [ ] 지원 μš”μ²­ => 여기에 지원 μš”μ²­μ„ μ œμΆœν•˜μ§€ λ§ˆμ‹­μ‹œμ˜€. 이 ν…œν”Œλ¦Ώ μƒλ‹¨μ˜ μ°Έκ³  사항을 μ°Έμ‘°ν•˜μ‹­μ‹œμ˜€.
  • ν˜„μž¬ 행동은 λ¬΄μ—‡μž…λ‹ˆκΉŒ?

μ–΄λ–€ 이유둜 indexChanged λ©”μ„œλ“œκ°€ μ œλŒ€λ‘œ μž‘λ™ν•˜μ§€ μ•ŠλŠ” κ²ƒμœΌλ‘œ λ‚˜νƒ€λ‚¬μŠ΅λ‹ˆλ‹€. 가끔은 λ§ˆμ§€λ§‰ 인덱슀λ₯Ό λŒλ €μ£ΌλŠ”λ° μΊλŸ¬μ…€μ„ 보면 끝이 μ•„λ‹™λ‹ˆλ‹€. κ·Έ λ•Œλ¬Έμ— moveRight λ©”μ„œλ“œκ°€ 더 이상 μž‘λ™ν•˜μ§€ μ•ŠλŠ”λ‹€κ³  κ°€μ •ν•©λ‹ˆλ‹€(λ§ˆμ§€λ§‰ μΈλ±μŠ€μ— 도달함).

  • ν˜„μž¬ λ™μž‘μ΄ 버그인 경우 μž¬ν˜„ν•˜λŠ” 단계λ₯Ό μ œκ³΅ν•˜κ³  κ°€λŠ₯ν•œ 경우 문제의 μ΅œμ†Œ 데λͺ¨λ₯Ό μ‚¬μš©ν•˜κ±°λ‚˜ https://plnkr.co λ₯Ό 톡해 데λͺ¨ μ‚¬μ΄νŠΈλ₯Ό μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

indexChanged λ©”μ†Œλ“œλ₯Ό ν˜ΈμΆœν•˜μ—¬ 이λ₯Ό μž¬ν˜„ν•˜κ³  μ‹€μ œ μΈλ±μŠ€μ™€ (μ‹œκ°μ μœΌλ‘œ) 비ꡐ할 수 μžˆμ–΄μ•Ό ν•©λ‹ˆλ‹€.

  • μ˜ˆμƒλ˜λŠ” λ™μž‘μ€ λ¬΄μ—‡μž…λ‹ˆκΉŒ?
    μ˜¬λ°”λ₯Έ 인덱슀λ₯Ό 얻을 κ²ƒμœΌλ‘œ μ˜ˆμƒν•˜μ§€λ§Œ μ–΄λ–€ 이유둜 μ‚¬μš© μ§€μ μ—μ„œ μΈλ±μŠ€κ°€ λ§ˆμ§€λ§‰ 인덱슀둜 μ ν”„ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

  • 행동을 λ°”κΎΈλŠ” 동기/μ‚¬μš© μ‚¬λ‘€λŠ” λ¬΄μ—‡μž…λ‹ˆκΉŒ?
    이λ₯Ό λ””λ²„κΉ…ν•˜λ©΄ MoveRight/MoveLeft λ©”μ„œλ“œλ₯Ό λ‹€μ‹œ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

  • κ·€ν•˜μ˜ ν™˜κ²½μ— λŒ€ν•΄ μ•Œλ €μ£Όμ‹­μ‹œμ˜€.

    • λΈŒλΌμš°μ €: 크둬

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

λΆˆν–‰νžˆλ„ λ¬Έμ œλŠ” μ—¬μ „νžˆ μ‘΄μž¬ν•©λ‹ˆλ‹€. λ‹€μ‹œ μ—¬μ‹­μ‹œμ˜€.
[email protected]둜 데λͺ¨λ₯Ό μ‹œλ„ν–ˆλŠ”λ° 인덱슀 6μ—μ„œ 인덱슀 10κΉŒμ§€ μ›€μ§μž„μ΄ μž‘λ™ν•˜μ§€ μ•ŠλŠ” κ²ƒμœΌλ‘œ λ‚˜νƒ€λ‚¬μŠ΅λ‹ˆλ‹€. "였λ₯Έμͺ½" λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ 이미지가 μ—¬μ „νžˆ μ™Όμͺ½μœΌλ‘œ 이동할 κ²ƒμœΌλ‘œ μ˜ˆμƒν•©λ‹ˆλ‹€.

λͺ¨λ“  10 λŒ“κΈ€

@Andi1990λ‹˜ , 데λͺ¨ μ• ν”Œλ¦¬μΌ€μ΄μ…˜ μΊλŸ¬μ…€μ—μ„œ 문제λ₯Ό μž¬ν˜„ν•  수 μžˆμŠ΅λ‹ˆκΉŒ? λ§ˆμ§€λ§‰ 인덱슀 문제λ₯Ό μž¬ν˜„ν•  수 μ—†λŠ” 것 κ°™μŠ΅λ‹ˆλ‹€.

데λͺ¨ 링크가 μ£½μ—ˆμŠ΅λ‹ˆλ‹€. λ°”μ΄μ˜¬λ¦°μ΄λ‚˜ 기타가 μžˆμŠ΅λ‹ˆκΉŒ?
κ·ΈλŸ¬λ‚˜ κ·Έ μ΄μœ λŠ” λ“œλž˜κ·Έ 슀크둀 μ»¨ν…Œμ΄λ„ˆμ— μžˆλŠ” img λŒ€μ‹  divκ°€ 있기 λ•Œλ¬ΈμΌ 수 μžˆμŠ΅λ‹ˆλ‹€.

λ‹€μŒμ„ μ‚¬μš©ν•˜μ—¬ 데λͺ¨λ₯Ό μ‹€ν–‰ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

$ git clone [email protected]:bfwg/ngx-drag-scroll.git
$ cd ngx-drag-scroll
$ npm install
$ npm start

https://github.com/bfwg/ngx-drag-scroll.git 을 λ³΅μ œν•˜μ—¬ 데λͺ¨λ₯Ό μ‹€ν–‰ν–ˆλŠ”λ° μž‘λ™ν–ˆμŠ΅λ‹ˆλ‹€. κ°μ‚¬ν•©λ‹ˆλ‹€.
문제λ₯Ό μž¬ν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
였λ₯Έμͺ½μœΌλ‘œ 이동 λ²„νŠΌμ„ μ—¬λŸ¬ 번 ν΄λ¦­ν•˜λ©΄ λ‹€μŒ μ½˜μ†” 좜λ ₯이 μƒμ„±λ©λ‹ˆλ‹€.
Angularκ°€ 개발 λͺ¨λ“œμ—μ„œ μ‹€ν–‰ μ€‘μž…λ‹ˆλ‹€. enableProdMode()λ₯Ό ν˜ΈμΆœν•˜μ—¬ ν”„λ‘œλ•μ…˜ λͺ¨λ“œλ₯Ό ν™œμ„±ν™”ν•©λ‹ˆλ‹€.
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 1둜 변경됨
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 0으둜 변경됨
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 1둜 변경됨
home.component.ts:92 μŠ€λƒ… μ• λ‹ˆλ©”μ΄μ…˜ μ™„λ£Œ
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 2둜 변경됨
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 1둜 변경됨
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 2둜 변경됨
home.component.ts:92 μŠ€λƒ… μ• λ‹ˆλ©”μ΄μ…˜ μ™„λ£Œ
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 3으둜 변경됨
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 2둜 변경됨
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 3으둜 변경됨
home.component.ts:92 μŠ€λƒ… μ• λ‹ˆλ©”μ΄μ…˜ μ™„λ£Œ
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 4둜 변경됨
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 3으둜 변경됨
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 4둜 변경됨
home.component.ts:92 μŠ€λƒ… μ• λ‹ˆλ©”μ΄μ…˜ μ™„λ£Œ
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 5둜 변경됨
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 4둜 변경됨
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 5둜 변경됨
home.component.ts:92 μŠ€λƒ… μ• λ‹ˆλ©”μ΄μ…˜ μ™„λ£Œ
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 6으둜 변경됨
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 5둜 변경됨
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 6으둜 변경됨
home.component.ts:92 μŠ€λƒ… μ• λ‹ˆλ©”μ΄μ…˜ μ™„λ£Œ
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 7둜 변경됨
home.component.ts:92 μŠ€λƒ… μ• λ‹ˆλ©”μ΄μ…˜ μ™„λ£Œ
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 8둜 변경됨
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 9둜 변경됨
home.component.ts:92 μŠ€λƒ… μ• λ‹ˆλ©”μ΄μ…˜ μ™„λ£Œ
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 8둜 변경됨
ngx-drag-scroll.ts:113 μΈλ±μŠ€κ°€ 9둜 변경됨
home.component.ts:92 μŠ€λƒ… μ• λ‹ˆλ©”μ΄μ…˜ μ™„λ£Œ

ngx-drag-scroll.tsμ—μ„œ μ½˜μ†” 좜λ ₯에 ν•œ 쀄을 μΆ”κ°€ν–ˆμŠ΅λ‹ˆλ‹€.
currIndex(κ°’) μ„€μ • {
if (κ°’ !== this._index) {
this._index = κ°’;
this.indexChanged.emit(κ°’);
console.log('μΈλ±μŠ€κ°€ ' + this._index둜 변경됨);
}
}

λ”°λΌμ„œ 두 가지 λ¬Έμ œκ°€ μžˆμŠ΅λ‹ˆλ‹€.

  • 인덱슀λ₯Ό ν† κΈ€ν•˜λŠ” μ΄μœ λŠ” λ¬΄μ—‡μž…λ‹ˆκΉŒ?
  • 그리고 μ–΄λ–€ 이유둜 λ²„νŠΌμ„ μ—¬λŸ¬ 번 ν΄λ¦­ν•˜λ©΄ 인덱슀 9둜 μ ν”„ν•˜κ³  λ²„νŠΌμ΄ 더 이상 μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€(움직이지 μ•ŠμŒ).

2.0.0-beta.7을 μ‚¬μš©ν•΄ λ³΄μ‹­μ‹œμ˜€. λ‹€μ‹œ μ—΄μ–΄μ•Ό ν•˜λŠ” 경우 μ•Œλ €μ£Όμ„Έμš”. μ‹ κ³ ν•΄ μ£Όμ…”μ„œ κ°μ‚¬ν•©λ‹ˆλ‹€!

λΆˆν–‰νžˆλ„ λ¬Έμ œλŠ” μ—¬μ „νžˆ μ‘΄μž¬ν•©λ‹ˆλ‹€. λ‹€μ‹œ μ—¬μ‹­μ‹œμ˜€.
[email protected]둜 데λͺ¨λ₯Ό μ‹œλ„ν–ˆλŠ”λ° 인덱슀 6μ—μ„œ 인덱슀 10κΉŒμ§€ μ›€μ§μž„μ΄ μž‘λ™ν•˜μ§€ μ•ŠλŠ” κ²ƒμœΌλ‘œ λ‚˜νƒ€λ‚¬μŠ΅λ‹ˆλ‹€. "였λ₯Έμͺ½" λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ 이미지가 μ—¬μ „νžˆ μ™Όμͺ½μœΌλ‘œ 이동할 κ²ƒμœΌλ‘œ μ˜ˆμƒν•©λ‹ˆλ‹€.

λ¬Έμ œλŠ” λ§ˆμ§€λ§‰ 이미지(인덱슀)λ₯Ό μ„ νƒν•œ κ²½μš°μ—λ§Œ λ°œμƒν•˜λŠ” κ²ƒμœΌλ‘œ λ‚˜νƒ€λ‚¬μŠ΅λ‹ˆλ‹€. 그런 λ‹€μŒ 이전 μ΄λ―Έμ§€λ‘œ 이동(슀크둀 λ˜λŠ” λ²„νŠΌ μ‚¬μš©)ν•˜λ©΄ 탐색이 μ œλŒ€λ‘œ μž‘λ™ν•˜μ§€λ§Œ _indexChanged()_ ν•¨μˆ˜κ°€ λ³€κ²½λœ 인덱슀λ₯Ό μΈμ‹ν•˜μ§€ λͺ»ν•˜κ±°λ‚˜ λ§ˆμ§€λ§‰ 인덱슀둜 λ‹€μ‹œ 잘λͺ» μ „ν™˜λ©λ‹ˆλ‹€.
λ§ˆμ§€λ§‰ μ΄λ―Έμ§€μ—μ„œ 이전 μ΄λ―Έμ§€λ‘œ μ΄λ™ν•˜λ €κ³  ν•  λ•Œμ˜ 예제 μ½˜μ†” 좜λ ₯(λ§ˆμ§€λ§‰ 인덱슀 = 8):
인덱슀 λ³€κ²½ 7
인덱슀 λ³€κ²½ 8

도움이 λ˜μ…¨λ‚˜μš”?

였늘 ν‡΄κ·Όν•˜κ³  λ΄μ•Όκ² μŠ΅λ‹ˆλ‹€. 지연 λΌμ„œ μ£„μ†‘ν•©λ‹ˆλ‹€.

@Andi1990λ‹˜ , 2.0.2λ₯Ό μ‚¬μš©ν•΄ μ£Όμ‹œκ² μŠ΅λ‹ˆκΉŒ? 감사 ν•΄μš”

μž‘λ™ν•©λ‹ˆλ‹€. μž˜ν–ˆμŠ΅λ‹ˆλ‹€!

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰