Cuando el terminal móvil está limitado por el tamaño de la pantalla y muestra mucho contenido, algunas áreas deben deslizarse. Este artículo muestra todas las formas en el proyecto. Puede elegir el método deslizante apropiado de acuerdo con sus necesidades. El principio básico del deslizamiento es que hay dos contenedores A y B. Si A está en la capa externa y B está en la capa interna; Si A está en el ancho o la altura de la capa externa A es fija, se puede enrollar el ancho o la altura del contenedor de la capa interna B.
Método de implementación
1). desplazamiento de iones
Use los comandos deslizantes que vienen con Ionic
<ion-view view-title = "panel de control"> <ion-content ha-bouncing = "false"> <ion-scroll ha-bouncing = "false" direction = "x"> <div> ion-scroll realiza el deslizamiento, y utiliza el componente deslizante proporcionado por iónico para lograr el deslizamiento. Para otras propiedades de desplazamiento de iones, consulte el documento oficial del sitio web </div> </ ion-scroll> </ ion-content> </ ion-view>
2). desbordamiento de CSS
<ion-view view-title = "Dashboard"> <ion-content has-buncing = "false" overflow-scroll = "true"> <div> <div> use el atributo de desbordamiento de CSS o desplazamiento para implementar desplazamiento, use el atributo de desbordamiento de CSS o desplazamiento para implementar el desplazamiento, use el atributo de Overflow de CSS o desplazamiento para implementar el scripte de cslolls o el desplazamiento de los scroll de Scroll, use el atributo de Overflow o Scroll o Scroll. Descrollado Para implementar el desplazamiento, use el atributo de desbordamiento de CSS o desplazamiento para implementar desplazamiento, use el atributo de desbordamiento de CSS o desplazamiento para implementar desplazamiento, use el atributo de desbordamiento de CSS o desplácese para implementar desplazamiento </div> </div> </ion-content> </ion-View>
• Overflow: Auto Si el contenido está recortado, el navegador muestra una barra de desplazamiento para ver el resto.
• Overflow: el contenido de desplazamiento se recortará, pero el navegador mostrará una barra de desplazamiento para ver el resto.
Nota: De esta manera, el contenido de iones debe agregar Overflow-Scroll = "True" Directiva para indicar que se usa el desplazamiento del sistema en lugar del desplazamiento de Ionic. Ionic implementa su propio conjunto de métodos de desplazamiento.
ESCUCHA EVENTOS TOUCH
<div id = "dash_scroll_container"> <div ng ng-repeat = "d en datas" style = "margin-right: 20px; border: sólido 1px #ffc900; altura: 100%; ancho: 100px; display: inline-block; text-align: centro; line-ceñida: 40px;"> {{}}} <Div> <<Div> <<Div> <DiverJS correspondiente
Angular.module ('Starter.Controllers', []). Controller ('DashCtrl', function ($ scope) {$ scope.datas = [1,2,3,4,5,6,7,7,8,9,10]; var startx = 0, starty = 0; var $ domscroll = $ ("#dash_scroll_container");; $ domscroll.on ("touchStart", function (e) {startx = e.originalvent.changedTouches [0] .pagex; starty = e.originalevent.changedTouches [0] .pagey; console.log ("start :("+startx+","+starty+")"+"-"+$ (este). $ domscroll.on ("touchmove", function (e) {var x = e.originalvent.changedTouches [0] .pagex-startx; var y = e.originalevent.changedTouches [0] .pagey-starty; if (math.abs (x)> math.abs (y)) {// slide izquierda y derecha ($ ($ ($), x), x), x), x), x), x), x),},}, x), x), x); if (math.abs (y)> Math.abs (x)) {// Slide hacia arriba y hacia abajo ScrollTop ($ (this), y); E.PreventDefault (); e.stoppropagation ();Al escuchar los eventos de touchstart y touchmove del dedo, se obtiene la distancia deslizante y la barra de desplazamiento del contenedor externo Div está llamado a desplazarse a la distancia correspondiente.
• $ (selector) .scrollleft (posición): establezca la posición de desplazamiento horizontal del elemento
• $ (selector) .scrolltop (posición): establezca la posición de desplazamiento vertical del elemento
Finalmente, use el comando AngularJS para encapsular el desplazamiento escuchando una instrucción, lo cual es conveniente para su uso durante el deslizamiento en el futuro.
Agregar en directive.js:
angular.module ('Starter.Directives', []). Directiva ('myscroll', function () {function link ($ scope, element, attrs) {var $ domscroll = $ (elemento [0]); var startx = 0, starty = 0; $ domscroll.on ("toque", function (e) { startx = e.originalvent.changedTouches [0] .pagex; = e.originalvent.changedTouches [0] .pagex-startx; // Slide hacia arriba y hacia abajo ScrollTop ($ (this), y); E.StopPagation (); return {restringir: 'a', link: link};});De esta manera, es conveniente usar después de la encapsulación, y agregue las instrucciones my-scroll a los elementos que deben deslizarse.
<div my-scroll style = "border: slateBlue sólido 1px; ancho: 100%; altura: 300px; desbordamiento: oculto; margen: 0; relleno: 0;"> <div> <div ng-repeat = "d en datos" estilo = "margen-bottom: 20px; borde: sólido 1px 1px; #007aff; altura: 80px; text-align: center; line-hight: 80px; "> región {{d}} </div> </div> <div> <div> <div ng ng-repeat =" d en datos "estilo =" margen-bottom: 20px; border: sólido 1px #ffc900; altura: 80px; text-align; {{d}} cada línea </div> </div> </div> </div>Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.