안드로이드 하이브리드앱 웹뷰 swipe 사용중 오류 해결

안드로이드 웹뷰 환경으로 개발은 처음.

 

화면 퍼블되있는걸 받아서 작업을 하는데

swipe가 적용되어 있었고 별이상 없어 보였는데

 

 

왠걸.. 스와이프로 스르륵 날짜를 돌리는데

블록이 잡히고 제대로 작동하지 않는 듯했다.

 

일단 블록 잡히는건 style 문제.

 

user-select:none; // 기존에 퍼블을 받을 때 all로 되어 있는걸 none으로 바꾸니 해결.

 

 

또 다른 문제는.

swipe를 조작하는 div 화면은 하나만 쓰고

검색시작 날짜와 검색종료 날짜를 선택 할때

입력 되어 있는 값을 넣어주고 싶은 마음에

건드리기 시작했는데

해당 월이나 일자가 active되어 있고 css는 다 먹는데

확인을 누르면 해당 값이 변경 되지 않았다.

 

//이전 소스
$("#startClick, #endClick").on("click",function(){
	clickDateId = $(this).attr("id");
	
	var changeId = "";
	if(clickDateId == "endClick"){
		changeId = "endDe";
	}else{
		changeId = "startDe";
	}
	
	var yearNum = parseInt($("#"+changeId).val().substring(0,4)) - 2022;
	defaultsYear.initialSlide = yearNum 
	startYear = new Swiper('.datepicker-wrap-start .swiper-container.year',
			defaultsYear
	);
	startYear.realIndex = yearNum
	
	var monthNum = parseInt($("#"+changeId).val().substring(5,7)) -1;
	defaultsMonth.initialSlide = monthNum
	startMonth = new Swiper('.datepicker-wrap-start .swiper-container.month',
		defaultsMonth
	);
	startMonth.realIndex = monthNum
	
	var dayNum = parseInt($("#"+changeId).val().substring(8,10)) -1;
	console.log("dayNum:::",dayNum);
	
	defaultsDay.initialSlide = dayNum;
	startDay = new Swiper('.datepicker-wrap-start .swiper-container.day',
			defaultsDay
	);
	startDay.realIndex = dayNum;
	
	$(".datepicker-wrap-start").css("opacity" , "1");
	$(".datepicker-wrap-start").css("user-select" , "none");
	$(".datepicker-wrap-start").css("z-index" , "9999");
});

 

initialSlide에 값을 넣어서 해당값으로 div화면이 뜨는건 되지만

스스륵 돌렸을때 active된 값이 제대로 넘어 가지 않아서

realIndex 값도 넣어주고 했는데

initialSlide를 손대는거 자체가 문제가 되어 버린다.

 

 

그래서 다음 방법은

//	on을 이용해서 active 되어 있는 값을 넣어주려고도 해봤는데 정상 작동 하지 않았음

defaultsMonth.on =  {
    slideChange: function() {				
        if(startMonth.realIndex != parseInt($(".month_box > .swiper-slide-active").attr("data-swiper-slide-index").substring(0,1))){
            startMonth.realIndex = parseInt($(".month_box > .swiper-slide-active").attr("data-swiper-slide-index").substring(0,1));
        }

    }
}

 

swipe on을 이용해서 해당 위치의 값을 이용해 보려했으나...

값 자체는 작동하나.. 뭔가 원치 않아 다시 다른걸 검색.

 

https://velog.io/@yooahreum7473/%EC%9E%91%EC%84%B1%ED%85%8C%EC%8A%A4%ED%8A%B8

swipe 번역

 

이곳의 도움을 받아 여러가지 적용을 해보았다.

 

 

//slideTo() 사용
// 왜 9를 더해줘야 정상작동하는지좀...

$("#startClick, #endClick").on("click",function(){
	clickDateId = $(this).attr("id");
	
	var changeId = "";
	if(clickDateId == "endClick"){
		changeId = "endDe";
	}else{
		changeId = "startDe";
	}
	
	var yearNum = parseInt($("#"+changeId).val().substring(0,4)) - 2022;
	startYear.slideTo(yearNum,500);
	
	var monthNum = parseInt($("#"+changeId).val().substring(5,7)) -1;
	startMonth.slideTo(monthNum+9,500);

	var dayNum = parseInt($("#"+changeId).val().substring(8,10)) -1;
	startDay.slideTo(dayNum+9,500);
	
	$(".datepicker-wrap-start").css("opacity" , "1");
	$(".datepicker-wrap-start").css("user-select" , "none");
	$(".datepicker-wrap-start").css("z-index" , "9999");
});

 

결국은 소스도 깔끔하고 원하던대로 정상작동은 하나...

왜 9를 더해야 정상적인 원하는 월과 일자가 선택되는지는...

모르겠다...

(아시는 분은 댓글좀 부탁드립니다ㅠㅠ)

 

어쩌다 여기까지 왔는지 모르겠는데ㅎㅎ

swipe를 사용시 active 된 값이 제대로 리턴이 안될때

블록이 잡힐때.

위에 방법으로 해결해 봅시다!

 

그럼이만!