vue-carousel을 한 레이어에 multiple로 사용하게 되었다.
제공되는 API는 슬라이드를 miltiple 사용에 대한 속성이 따로 정해져 있지 않았다.
pc에서는 사용에 불편이 없었지만 mobile에서 슬라이드의 세로축 스크롤 시 클릭 이벤트가 실행되는 현상이 발견되었다.
github에서 이슈를 확인해보니 나랑 비슷한 문제에 봉착한 사람이 있는 듯 했다.
그래서 첫번째 스크립트 작성 시 참고해봤다.
https://github.com/SSENSE/vue-carousel/issues/566
내 상황과 완벽하게 똑 떨어지진 않았지만 그래도 거의 그냥 코드를 그대로 사용했기 때문에 따로 정리하진 않겠다.
사용된 이벤트에 대한 내용은 아래를 참고하길 바란다.
Touch events
https://developer.mozilla.org/ko/docs/Web/API/Touch_events
원하는대로 동작이 잘 되긴 하나 start와 end를 나눠 접촉한 포인트를 저장하고 비교해야 하는 조금은 복잡한 코드한 듯 느껴 조금 더 간단하게 코드를 작성해보기로 했다.
mobileTouch: boolean = true;
// 스크롤 시 클릭 방지
handleGesture(id: string) {
if(this.mobileTouch) {
this.$router.push(`링크로 이동`);
}
}
mounted() {
// touchmove 일때는 클릭되지 않게 한다.
window.addEventListener('touchmove', () => {
this.mobileTouch = false;
});
window.addEventListener('touchstart', () => {
this.mobileTouch = true;
});
window.addEventListener('touchcancel', () => {
this.mobileTouch = true;
});
window.addEventListener('touchend', () => {
this.mobileTouch = true;
});
}
unmounted() {
window.removeEventListener('touchmove', () => {});
window.removeEventListener('touchstart', () => {});
window.removeEventListener('touchcancel', () => {});
window.removeEventListener('touchend', () => {});
}
MDN touchevent에 보면 touchstart나 touchstart 외에도 touchmove라는 값이 있었다.
정확히 내가 원했던 값으로 우선 mobileTouch를 만들어 true로 설정했다.
touchmove 일 때만 mobileTouch를 false인 상태로 만들고 클릭이벤트에 true일때만 링크로 이동하도록 조건문을 생성했다.
그랬더니 pc에서는 클릭 이벤트가 제대로 동작을 안하더라.. 하하하
그래서 pc일때는 그냥 클릭이 가능하도록 조건문을 추가해주었다.
handleGesture(id: string) {
if(!this.isMobile || this.mobileTouch) { // pc일때는 항상 클릭 가능하도록 추가
this.$router.push(`링크로 이동`);
}
}
get isMobile() {
return 모바일 auth를 가져옴
}
로컬을 모바일에서 확인하기 위해 ngrok를 사용해봤다. 단점!!!! 속도가 너무너무너무 느려서 정말 인내심의 한계를 느꼈으며, 성격이 나빠졌다.
ngrok
https://blog.outsider.ne.kr/1159
사용하려면 사이트로 이동해서 회원가입 후 access token은 등록해야 한다. 한번만 등록해두면 쭉 사용할 수 있다고 한다.
근데.. 그냥 mac 유저라면 Safari를 통해 확인하길...(근데 왜그런지 이것도 좀 느렸음.. 나만... 왜 나만...)
'Vue.js' 카테고리의 다른 글
[Nuxt.js] scss 설치하기 (0) | 2022.04.01 |
---|---|
[Nuxt.js] nuxt.js로 프로젝트 시작하기 (0) | 2022.04.01 |
[error] vue create <프로젝트명> 설치 에러 (0) | 2022.03.29 |
[nuxt.js] NUXT(템플릿 설치는 vue-cli) 설치하기 (0) | 2022.03.22 |
vue axios 사용하여 서버 통신 (0) | 2022.03.22 |