Ngx-drag-scroll: arrastrar el desplazamiento no funciona en la vista móvil

Creado en 22 ago. 2017  ·  22Comentarios  ·  Fuente: bfwg/ngx-drag-scroll

bug

Comentario más útil

@ suresh2018 No npm install && npm start para iniciar la aplicación de demostración en el puerto :4200 ? Puede utilizar la herramienta de desarrollo de Chrome para comprobar si le funciona.

Todos 22 comentarios

Se relaciona con el n. ° 20

El PR ha subido, solo voy a revisar el código nuevamente y lanzar una nueva versión. Siéntase libre de agregar cualquier comentario si cree que hay algo mal en el código de relaciones públicas. @ suresh2018 @nachocoig.

1.3.7 está fuera. Si eso no soluciona el problema, avíseme, gracias de nuevo por su paciente.

@bfwg

1.3.6 mostró un error de cancelación de clic, pero 1.3.7 no muestra este error.
esta versión también arrastra el desplazamiento no funciona en el móvil.

gracias de antemano

image

no funciona 1.3.7

@ suresh2018 Me está funcionando. ¿Arrastra el desplazamiento te funciona en la vista de escritorio?

escritorio funcionando bien. pero no moblie (iphone 6 plus)

Extraño, ¿puedes mostrarme un fragmento de tu código de carrusel? ¿Lo ha probado en un dispositivo real?

* desplazamiento horizontal *

div class = "hideoverflow" arrastrar y desplazar

            img *ngFor="let img of pic.images; let idx = index" [src]="img .Image" 
              class="scroll-images"

          div

¿Habéis probado la demostración de arrastrar y desplazar (en README.md) en dispositivos táctiles?

@rahil

demo arrastrar desplazamiento no funciona dispositivo táctil

@ suresh2018 @bfwg Estoy usando esta biblioteca en mi proyecto Ionic 2. El desplazamiento funciona bien para mí, si emulo en el emulador de Chrome Dev Tools Mobile, pero hay algunos problemas importantes que estoy teniendo

  1. La pantalla donde se usa arrastrar y desplazar, deshabilita todos los eventos de clic en esa pantalla
    Por ejemplo
<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col>
        <button ion-button (click)="foo()">Click Me!</button>
        <!-- On mobile view click stops working. If I remove [drag-scroll] it starts working again -->
      </ion-col>
      <ion-col>
        <div drag-scroll>
          <!-- *ngFor let item of items (horizontal scroll) -->
          <button ion-button (click)="someFunc()"></button>
          <!-- also click event don't work in mobile view. Fixes if [drag-scroll] is removed! -->
        </div>
      </ion-col>
      <ion-col>
        <button ion-button (click)="bar()">Click Me Again!</button>
        <!-- On mobile view click stops working. If I remove [drag-scroll] it starts working again -->
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
  1. [scrollbar-hidden] = "true" elimina todo el componente de arrastrar y desplazar de la pantalla (Ionic 2). "falso" no lo hace.

Hola, @ rahil051

  1. El evento de clic que no se activa se corrigió en v1.3.7.
  2. debe escribir scrollbar-hidden="true" o simplemente scrollbar-hidden para un atributo fijo. Si desea vincular el atributo a una variable en su componente, debe escribir [scrollbar-hidden]="flagVariable" note cuándo usar los corchetes.

Para obtener más información, consulte https://github.com/bfwg/angular2-drag-scroll/blob/master/demo/app/home/home.component.html#L26

@ suresh2018 No npm install && npm start para iniciar la aplicación de demostración en el puerto :4200 ? Puede utilizar la herramienta de desarrollo de Chrome para comprobar si le funciona.

Hola @bfwg , perdón por mi respuesta tardía (estaba en minivacaciones; D)

Reinstalé la demostración de su componente angular y sí, ¡funciona en la versión móvil!
También intenté usarlo en mi aplicación, ¡y también funciona!

¡Gracias por tu atención!

¡Buen trabajo!

Hola @bfwg ,

finalmente, encuentro este problema.
Necesito establecer el ancho horizontal, entonces solo funcionará

Gracias ..

Hola @bfwg ,
finalmente, encuentro este problema.
Necesito establecer el ancho horizontal, entonces solo funcionará
Gracias

Dulce, me alegro de que les haya funcionado a ustedes. Ahora puedo cerrar este problema con seguridad.

Gracias por informar de este problema nuevamente.

¡Oye, esta es, con mucho, la mejor biblioteca de carrusel ng2! Sin embargo, parece que no puedo hacer que funcione en dispositivos móviles.

  • La aplicación de demostración funciona bien en computadoras de escritorio y dispositivos móviles
  • Mi código solo funciona en el escritorio. Arrastrar no funciona en dispositivos móviles

Necesito establecer el ancho horizontal, entonces solo funcionará

Establecí el ancho: 100% en drag-scroll, en un contenedor fuera de drag-scroll y en un div dentro de drag-scroll (todas las combinaciones posibles) y todavía no funciona.

EDITAR:
Cloné el repositorio, lo implementé y lo probé en dispositivos móviles y funciona bien. Tengo el mismo html y css que en home.component, pero el arrastre solo funciona en el escritorio. Supongo que no necesito materiales angulares en mi proyecto.

Hola @kzntswsk , gracias por los comentarios. ¿Puedes hacer una pequeña demostración con https://plnkr.co/? No puedo ayudarte sin jugar tu código 😄

Hola @kzntswsk , gracias por los comentarios. ¿Puedes hacer una pequeña demostración con https://plnkr.co/? No puedo ayudarte sin jugar tu código 😄

También me he encontrado con esto. No puedo hacer un plnkr en este momento, pero parece que solo hace esto con scrollbar-hidden="true" mientras que solo scrollbar-hidden no hace nada.

EDITAR: Si voy a .drag-scroll-content en las herramientas de desarrollo y anulo la selección de overflow: hidden auto; lo arregla, pero la barra de desplazamiento vuelve a estar visible. Entonces, esto parecería tener que ver con el método utilizado para ocultar la barra de desplazamiento para dispositivos móviles.

El problema es que los eventos no se activan en Chrome Dev Tools en el modo de dispositivo.

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

Another-Sam picture Another-Sam  ·  12Comentarios

CrackerakiUA picture CrackerakiUA  ·  25Comentarios

MortezaT picture MortezaT  ·  11Comentarios

BovineEnthusiast picture BovineEnthusiast  ·  5Comentarios

IlCallo picture IlCallo  ·  14Comentarios