Quando o terminal móvel é limitado pelo tamanho da tela e exibe muito conteúdo, algumas áreas precisam ser deslizadas. Este artigo mostra todos os caminhos do projeto. Você pode escolher o método de deslizamento apropriado de acordo com suas necessidades. O princípio básico do deslizamento é que existem dois recipientes A e B. se A estiver na camada externa e B estiver na camada interna; Se A estiver na largura ou altura da camada externa A for fixo, a largura ou a altura do contêiner da camada interna B poderá ser rolada.
Método de implementação
1). rolagem de íons
Use os comandos deslizantes que vêm com Ionic
<ion-view view-title = "Dashboard"> <ion-content has bouncing = "false"> <ion-scroll has-bouncing = "false" direction = "x"> <div> ion-scroll realiza deslizamento e usa o componente deslizante fornecido pelo Ionic para obter deslizamento. Para outras propriedades de rolagem de íons, consulte o documento oficial do site </div> </ion-scroll> </ion-content> </ion-view>
2). transbordamento do CSS
<ion-view view-title="Dashboard"> <ion-content has-buncing="false" overflow-scroll="true"> <div> <div> Use the overflow attribute of css or scroll to implement scroll, use the overflow attribute of css or scroll to implement scrolling, use the overflow attribute of css or scroll to implement scrolling, use the overflow attribute of css or scroll to implement Rolagem, use o atributo de excesso de CSS ou role para implementar a rolagem, use o atributo Overflow do CSS ou role para implementar a rolagem, use o atributo Overflow do CSS ou Roll para implementar a rolagem </div> </div> </ion-content> </ion-view>
• Overflow: automático Se o conteúdo for aparado, o navegador exibe uma barra de rolagem para visualizar o restante.
• Overflow: o conteúdo de rolagem será aparado, mas o navegador exibirá uma barra de rolagem para visualizar o restante.
NOTA: Dessa maneira, o conteúdo do ION precisa adicionar diretiva de overflow-scroll = "true" para indicar que a rolagem do sistema é usada em vez do rolamento da Ionic. Ionic implementa seu próprio conjunto de métodos de rolagem.
Ouça eventos de toque
<div id = "Dash_scroll_container"> <div ng-repeat = "d em dados" style = "margem-direita: 20px; borda: sólido 1px #ffc900; altura: 100%; width: 100px; display: Block inline; text-align: Center; line-hight: 40px;
JS correspondente
angular.module ('starter.controllers', []). $ domscroll.on ("touchstart", function (e) {startx = e.originalevent.ChangedTouches [0] .pagex; starty = e.originalevent.ChangedTouches [0] .Pagey; console.log ("Iniciar: ("+startx+","+starty+")" $ domscroll.on ("touchmove", function (e) {var x = e.originalevent.ChangedTouches [0] .Pagex-startx; var y = e.originalevent.ChangedTouches [0] .Pagey-start; if (math.abs (x)> math.abs (y) {y) {y), //; Math.abs (y)> matemática.abs (x)) {// deslize para cima e para baixo scrolltop ($ (this), y); E.PrentDefault (); E.StopPropagation ();Ao ouvir os eventos Touchstart e Touchmove do dedo, a distância deslizante é obtida e a barra de rolagem da div contêiner externa é chamada para rolar para a distância correspondente.
• $ (seletor) .Scrollleft (posição): defina a posição de rolagem horizontal do elemento
• $ (seletor) .Scrolltop (posição): defina a posição de rolagem vertical do elemento
Por fim, use o comando angularjs para encapsular a rolagem de escuta em uma instrução, que é conveniente para uso durante o deslizamento no futuro.
Adicionar no Directive.js:
angular.module ('starter.directives', []). startx = e.originalevent.ChangedTouches [0] .Pagex; = e.originalevent.ChangedTouches [0] .Pagex-startx; e descendente de scrolltop ($), y); função scrolltop (obj, y) {var currentsCroll = obj.scrolltop (); link };});Dessa forma, é conveniente usar após o encapsulamento e adicione a instrução my-scroll aos elementos que precisam ser deslizados.
<div my-scroll style = "borda: slateblue sólido 1px; largura: 100%; altura: 300px; transbordamento: oculto; margem: 0; preenchimento: 0;"> <div> <div ng-repeat = "D em dados" style = "margin-bottom: 20px; borda: sólido 1px; 007ff; Região {{d}} </div> </div> <div> <div> <div ng-repeat = "d em dados" style = "margin-bottom: 20px; borda: sólido 1px #ffc900; altura: 80px; text-align: center; linha-hemef: 80px;O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.