Ngx-drag-scroll: arraste a rolagem não funciona na visualização móvel

Criado em 22 ago. 2017  ·  22Comentários  ·  Fonte: bfwg/ngx-drag-scroll

bug

Comentários muito úteis

@ suresh2018 Não consegui reproduzir o problema do toque no iPhone 6 Plus. Estou testando no aplicativo de demonstração. Você pode clonar este repositório e fazer um npm install && npm start para iniciar o aplicativo demo na porta :4200 ? Você pode usar o Chrome devtool para verificar se ele está funcionando para você.

Todos 22 comentários

Refere-se a # 20

O PR está pronto, vou apenas revisar o código novamente e enviar uma nova versão. Sinta-se à vontade para fazer comentários se achar que há algo errado no código de RP. @ suresh2018 @nachocoig.

1.3.7 está fora. Avise-me se isso não resolver o problema para você. Agradecemos novamente pelo seu paciente.

@bfwg

1.3.6 mostrou erro de cancelamento de clique, mas 1.3.7 não mostrou esse erro.
esta versão também arraste a rolagem não funciona no celular.

desde já, obrigado

image

não funciona 1.3.7

@ suresh2018 Está funcionando para mim. A rolagem de arrasto está funcionando para você na visualização da área de trabalho?

desktop funcionando bem. mas não móvel (iphone 6 plus)

Estranho, você pode me mostrar um pedaço do código do seu carrossel? Você já experimentou em um dispositivo real?

* rolagem horizontal *

div class = "hideoverflow" arrastar e rolar

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

          div

Vocês já experimentaram a demonstração de arrastar e rolar (em README.md) em dispositivos de toque?

@rahil

demonstração, arrastar, rolar, não funcionar, tocar dispositivo

@ suresh2018 @bfwg Estou usando esta biblioteca no meu projeto Ionic 2. A rolagem funciona bem para mim, se eu emular no emulador do Chrome Dev Tools Mobile, mas existem alguns problemas principais que estou tendo

  1. A tela onde o arrastar e rolar é usado desativa todos os eventos de clique nessa tela
    Por exemplo
<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" remove todo o componente drag-scroll da tela (Ionic 2). "false" não.

Olá, @ rahil051

  1. O evento de clique não dispara foi corrigido na v1.3.7.
  2. você precisa escrever scrollbar-hidden="true" ou simplesmente scrollbar-hidden para um atributo fixo. Se você deseja vincular o atributo a uma variável em seu componente, você precisa escrever [scrollbar-hidden]="flagVariable" note quando usar os colchetes.

Para obter mais informações, verifique https://github.com/bfwg/angular2-drag-scroll/blob/master/demo/app/home/home.component.html#L26

@ suresh2018 Não consegui reproduzir o problema do toque no iPhone 6 Plus. Estou testando no aplicativo de demonstração. Você pode clonar este repositório e fazer um npm install && npm start para iniciar o aplicativo demo na porta :4200 ? Você pode usar o Chrome devtool para verificar se ele está funcionando para você.

Olá @bfwg , desculpe pela demora na resposta (estava em minivacations; D)

Reinstalei seu demo de componente angular e sim, funciona na versão móvel!
Eu também tentei usá-lo em meu aplicativo e funciona também!

Obrigado por sua atenção!

Bom trabalho!

Olá @bfwg ,

finalmente, encontro esse problema.
precisa definir a largura horizontal, então só funcionará

obrigado ..

Olá @bfwg ,
finalmente, encontro esse problema.
precisa definir a largura horizontal, então só funcionará
obrigado

Legal, que bom que funcionou para vocês. Posso encerrar este problema com segurança agora.

Obrigado por relatar este problema novamente!

Ei, esta é de longe a melhor biblioteca de carrosséis do ng2! Não consigo fazer funcionar no celular, no entanto.

  • O aplicativo de demonstração funciona bem no desktop e no celular
  • Meu código só funciona no desktop. Arrastar não funciona no celular

precisa definir a largura horizontal, então só funcionará

Eu defini a largura: 100% em arrastar e rolar, em um invólucro fora de arrastar e rolar e em uma div dentro de arrastar e rolar (todas as combinações possíveis) e ainda não está funcionando.

EDITAR:
Eu clonei o repositório, implantei e testei no celular e ele funciona bem. Tenho o mesmo html e css que em home.component, mas o arrastar só funciona no desktop. Presumo que não preciso de materiais angulares em meu projeto.

Olá @kzntswsk , obrigado pelo feedback. Você pode fazer uma pequena demonstração com https://plnkr.co/? Não posso ajudá-lo sem brincar com seu código 😄

Olá @kzntswsk , obrigado pelo feedback. Você pode fazer uma pequena demonstração com https://plnkr.co/? Não posso ajudá-lo sem brincar com seu código 😄

Eu também encontrei isso. Eu não posso fazer um plnkr agora, mas parece que ele faz isso apenas com scrollbar-hidden="true" enquanto apenas scrollbar-hidden não faz nada.

EDITAR: Se eu for para .drag-scroll-content nas ferramentas de desenvolvimento e desmarcar overflow: hidden auto; isso corrige, mas a barra de rolagem está novamente visível. Portanto, isso parece ter a ver com o método usado para ocultar a barra de rolagem para dispositivos móveis.

O problema é que os eventos não são disparados no Chrome Dev Tools no modo de dispositivo

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

tommykamkcm picture tommykamkcm  ·  17Comentários

leogilardi6 picture leogilardi6  ·  8Comentários

Andi1990 picture Andi1990  ·  10Comentários

Another-Sam picture Another-Sam  ·  12Comentários

Sprauch picture Sprauch  ·  13Comentários