머리말
프로젝트에서 단어가있는 토글 슬라이딩 구성 요소가 필요하므로 Ionic은 다음을 제공합니다.
실제 프로젝트에서 필요한 것 :
온라인으로 다른 구현을 찾았지만 비슷한 것이 없다고 생각했고 적합한 것을 찾지 못했기 때문에 정의하고 가능한 한 사용하려고했습니다. 먼저 렌더링
렌더링을 보면 픽셀의 영향으로 인한 렌더링을 볼 때 들쭉날쭉 한 가장자리가 흐르고 Android 및 iOS 전화에서 매우 원활하게 수행됩니다.
코드를 구현하십시오
실제로 구현하기가 매우 간단합니다. 주로 슬라이더의 위치를 계산합니다. 슬라이딩은 CSS 변환을 사용합니다.
CSS에서 사용하는 클래스는 다음과 같습니다.
.witch_search {위치 : 상대; 디스플레이 : 플렉스; 너비 : 120px; 높이 : 28px; 마진-탑 : 8px; 테두리 : 고체 1px #fff; Border-Radius : 16px;}. switch_search_tab {flex : 1; 높이 : 28px; 너비 : 60px; line-height : 28px; color :#203c4b; z-index : 12;}. white_search_tab {color : #fff;}. switch_bg {backgring : #fff; border-radius : 16px; 위치 : 절대; 상단 : -1px; 왼쪽 : -1px; 높이 : 28px; 너비 : 60px;}. search_right {전환 : -webkit-transform, 0.6s 편의를 변환합니다. -webkit-transform : translate3d (60px, 0, 0); -Moz 변환 : Translate3d (60px, 0, 0); 변환 : translate3d (60px, 0, 0);}. search_left {전환 : -webkit -transform, 변환 0.6s 편의; -webkit-transform : translate3d (0px, 0, 0); -moz-transform : translate3d (60px, 0, 0);}. search_left {전환 : -webkit-transform, 0.6s 편의를 변환합니다. -webkit-transform : translate3d (0px, 0, 0); -Moz 변환 : translate3d (0px, 0, 0); -Moz 변환 : translate3d (0px, 0, 0); Translate3d (0px, 0, 0); 변환 : translate3d (0px, 0, 0);}페이지의 HTML 코드 :
<div> <div on-swipe-right = "activesLideSearch (1)"ng-click = "activesLideSearch (0)"ng-class = "(slideIndexSearch == 0 || slideIndexSearch == -1) '': 'white_search_tab'"> month </div> <div on-swipe search (0) ""ng-click = " ng-class = "(SlideIndexSearch == 1)? '': 'white_search_tab'"> day </div> <div ng class = "(slideIndexSearch == 0 || slideIndexSearch == -1) 'search_left': 'search_right'"> </div.
해당 컨트롤러 JS 코드는 다음과 같습니다.
$ scope.slideIndexSearch = -1; $ scope.ActivesLideEarch = function (index) {$ scope.slideIndexSearch = index;};이런 식으로, 단어와 함께 간단한 슬라이딩 토글 구성 요소를 구현할 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.