모바일 터미널이 화면 크기로 제한되고 많은 컨텐츠를 표시하면 일부 영역을 스 와이프해야합니다. 이 기사는 프로젝트의 모든 방법을 보여줍니다. 필요에 따라 적절한 슬라이딩 방법을 선택할 수 있습니다. 슬라이딩의 기본 원리는 a가 외부 층에 있고 b가 내부 층에있는 경우; A가 외부 층 A의 너비 또는 높이에있는 경우, 내부 층 컨테이너 B의 너비 또는 높이를 굴릴 수 있습니다.
구현 방법
1). 이온 스크롤
이온과 함께 제공되는 슬라이딩 명령을 사용하십시오
<Ion-View View-Title = "Dashboard"> <Ion-Content has-bouncing = "false"> <Ion-Scroll has-bouncing = "false"direction = "x"> <div> 이온 스크롤은 슬라이딩을 실현하고 Ionic이 제공 한 슬라이딩 구성 요소를 사용하여 슬라이딩을 달성합니다. 다른 Ion-Scroll 속성은 공식 웹 사이트 문서 </div> </iion-scroll> </iion-content> </iion-view>를 참조하십시오.
2). CSS의 오버플로
<Ion-View View-Title = "Dashboard"> <Ion-Content has-buncing = "False"OverFlow-Scroll = "True"> <div> <div> CSS 또는 스크롤의 오버 플로우 속성을 사용하여 스크롤을 구현하고 CSS 또는 스크롤의 오버 플로우 속성을 사용하여 SCROLLING에 대한 오버 플로우 속성을 사용합니다. 스크롤을 구현하려면 스크롤을 구현하고 CSS 또는 스크롤의 오버 플로우 속성을 사용하여 스크롤을 구현하고 CSS 또는 스크롤을 사용하여 스크롤을 구현하려면 </div> </div> </iion-view>를 구현하십시오.
• 오버플로 : 자동 콘텐츠가 다듬 으면 브라우저에 스크롤 바가 표시되어 나머지를 볼 수 있습니다.
• 오버플로 : 스크롤 컨텐츠가 트림되지만 브라우저에는 나머지를 볼 수있는 스크롤 바가 표시됩니다.
참고 : 이런 식으로 Ion-Content는 오버플로 스크롤 = "True"지침을 추가하여 Ionic의 스크롤 대신 시스템 자체 스크롤이 사용되었음을 나타냅니다. 이온 성은 자체 스크롤링 방법 세트를 구현합니다.
터치 이벤트를 듣습니다
<div id = "dash_scroll_container"> <div ng-repeat = "d datas in datas"style = "margin-right : 20px; 경계 : solid 1px #ffc900; 높이 : 100%; 너비 : 100px; 디스플레이 : 인라인 블록; 텍스트; 줄-height : 40px;
해당 JS
Angular.Module ( 'starter.controllers', []). 컨트롤러 ( 'dashctrl', function ($ scope.datas = [$ scope.datas = [1,2,3,4,5,6,8,9,10]; var startx = 0, Starky = 0; var $ domscroll = $ ( "#dash_scroll_container"); $ domscroll.on ( "t $ domscroll.on ( "t math.abs (y)> math.abs (x)) {// Scrolltop ($),}; e.StopPropagation (); E.StopPropagation ();});손가락의 터치 스타트 및 터치 모브 이벤트를 들으면 슬라이딩 거리가 얻어지고 외부 컨테이너 디스의 스크롤 막대가 호출되어 해당 거리로 스크롤됩니다.
• $ (selector) .scrollleft (위치) : 요소의 수평 스크롤 위치를 설정합니다
• $ (selector) .scrolltop (위치) : 요소의 수직 스크롤 위치를 설정합니다
마지막으로, AngularJS 명령을 사용하여 스크롤 청취를 하나의 명령어로 캡슐화하는데, 이는 향후 슬라이딩 중에 사용하기 편리합니다.
Directive.js 추가 :
Angular.module ( 'starter.directives', []). 지시 ( 'myscroll', function () {function link ($ scope, element, attrs) {var $ domscroll = $ (요소 [0]); var startx = 0, starty = 0; $ domscroll.on ( "터치 스타트", function (e) {e) { startx = changedtouches [0] = e.originalevent.ChangedTouches [0] .pagex-startx; 그리고 Down Scrolltop (y) {obj, x). 기능 스크롤 탑 (OBJ) {var constroll = console.log (parrentscroll); 링크};});이런 식으로 캡슐화 후 사용하는 것이 편리하며 미끄럼 방지가 미끄러 져야하는 요소에 내 스크롤을 추가하십시오.
<div my-scroll style = "Border : Slateblue Solid 1px; 너비 : 100%; 높이 : 300px; 오버플로 : 숨겨진; 마진 : 0; 패딩 : 0;"> <div> <div ng-repeat = "d datas in datas"style = "margin-bottom : 20px : solid 1px #007aff; 높이 : 80px; 텍스트-정렬 : 중심; 라인-하이트 : 80px; "> 지역 {{d}} </div> </div> <div> <div> <div> <div> <div> <div> <div> <div> <div ng-repeat ="style = "margin-bottom : 20px; 테두리 : 단단한 1px #ffc900; 높이 : 80px; 텍스트-정렬 : 중앙; 선-하이이트 : 80px; "> {{d}} 각 줄 </div> </div> </div> </div>위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.