Ngx-drag-scroll: faites glisser le défilement ne fonctionne pas dans la vue mobile

Se rapporte au #20

Le PR est en place, je vais juste revoir le code à nouveau et pousser une nouvelle version. N'hésitez pas à ajouter des commentaires si vous pensez qu'il y a quelque chose qui ne va pas dans le code PR. @suresh2018 @nachocoig.

1.3.7 est sorti. Faites-moi savoir si cela ne résout pas le problème pour vous, merci encore pour votre patient.

@bfwg

1.3.6 affichait une erreur d'annulation de clic mais 1.3.7 n'affichait pas cette erreur.
cette version fait également glisser le défilement ne fonctionne pas dans le mobile.

Merci d'avance

ne fonctionne pas 1.3.7

@suresh2018 Cela fonctionne pour moi. Le glisser-défilement fonctionne-t-il pour vous sur la vue de bureau ?

le bureau fonctionne bien .mais pas moblie (iphone 6 plus)

Bizarre, pouvez-vous me montrer une partie de votre code carrousel ? As-tu essayé sur un appareil réel ?

* défilement horizontal *

div class="hideoverflow" glisser-défilement

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

          div

Avez-vous déjà essayé la démo drag-scroll (dans README.md) sur des appareils tactiles ?

@rahil

démo glisser défilement ne fonctionne pas appareil tactile

@suresh2018 @bfwg J'utilise cette bibliothèque dans mon projet Ionic 2. Le défilement fonctionne bien pour moi, si j'émule sur l'émulateur Chrome Dev Tools Mobile, mais je rencontre peu de problèmes majeurs

1. L'écran où le glisser-défilement est utilisé, désactive tous les événements de clic sur cet écran
   Par exemple

<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" supprime l'intégralité du composant glisser-défilement de l'écran (Ionic 2). "faux" ne le fait pas.

Salut, @rahil051

1. l'événement de clic ne se déclenchant pas est corrigé dans la v1.3.7.
2. vous devez soit écrire scrollbar-hidden="true" ou simplement scrollbar-hidden pour un attribut fixe. Si vous souhaitez lier l'attribut à une variable dans votre composant, vous devez écrire [scrollbar-hidden]="flagVariable" noter quand utiliser les crochets.

Pour plus d'informations, veuillez consulter https://github.com/bfwg/angular2-drag-scroll/blob/master/demo/app/home/home.component.html#L26

@suresh2018 Je n'ai pas réussi à reproduire le problème tactile sur iPhone 6 Plus. Je teste sur l'application de démonstration. Pouvez-vous cloner ce dépôt et faire un npm install && npm start pour démarrer l'application de démonstration sur le port :4200 ? Vous pouvez utiliser l'outil de développement Chrome pour vérifier s'il fonctionne pour vous.

Bonjour @bfwg , désolé pour ma réponse tardive (j'étais en minivacances ;D)

J'ai réinstallé votre démo de composant angulaire et oui, cela fonctionne en version mobile !
J'ai également essayé de l'utiliser dans mon application, et cela fonctionne aussi !

Merci pour votre attention !

Bon travail!

Salut @bfwg ,

enfin, je trouve ce problème.
besoin de définir la largeur horizontale alors seulement cela fonctionnera

Merci ..

Salut @bfwg ,
enfin, je trouve ce problème.
besoin de définir la largeur horizontale alors seulement cela fonctionnera
Merci

Gentil, content que cela ait fonctionné pour vous les gars. Je peux fermer ce problème en toute sécurité maintenant.

Merci d'avoir à nouveau signalé ce problème !

Hé, c'est de loin la meilleure bibliothèque carrousel ng2 ! Je n'arrive pas à le faire fonctionner sur mobile, cependant.

• L'application de démonstration fonctionne bien sur ordinateur et mobile
• Mon code ne fonctionne que sur le bureau. Drag ne fonctionne pas sur mobile

besoin de définir la largeur horizontale alors seulement cela fonctionnera

J'ai défini width:100% sur le drag-scroll, sur un wrapper en dehors du drag-scroll et sur un div à l'intérieur du drag-scroll (toutes les combinaisons possibles) et cela ne fonctionne toujours pas.

ÉDITER:
J'ai cloné le référentiel, déployé et testé sur mobile et cela fonctionne bien. J'ai les mêmes html et css que dans home.component, mais le glisser ne fonctionne que sur le bureau. Je suppose que je n'ai pas besoin de matériaux angulaires dans mon projet.

Salut @kzntswsk , merci pour le retour. Pouvez-vous faire une petite démo avec https://plnkr.co/? Je ne peux pas t'aider sans jouer avec ton code

Salut @kzntswsk , merci pour le retour. Pouvez-vous faire une petite démo avec https://plnkr.co/? Je ne peux pas t'aider sans jouer avec ton code

J'ai aussi rencontré ça. Je ne peux pas faire de plnkr pour le moment, mais il semble ne le faire qu'avec scrollbar-hidden="true" alors que seul le scrollbar-hidden ne fait rien.

EDIT : si je vais à .drag-scroll-content dans les outils de développement et que je désélectionne overflow: hidden auto; cela résout le problème, mais la barre de défilement est à nouveau visible. Cela semble donc avoir à voir avec la méthode utilisée pour masquer la barre de défilement pour mobile.

Le problème est que les événements ne sont pas déclenchés dans Chrome Dev Tools en mode appareil