Ngx-drag-scroll: ドラッグスクロールがモバイルビューで機能しない

作成日 2017年08月22日  ·  22コメント  ·  ソース: bfwg/ngx-drag-scroll

bug

最も参考になるコメント

@ suresh2018 iPhone 6Plusでタッチの問題を再現できませんでした。 デモアプリでテストしています。 このリポジトリのクローンを作成し、 npm install && npm startを実行して、ポート:4200デモアプリを起動できますか? Chrome devtoolを使用して、機能しているかどうかを確認できます。

全てのコメント22件

#20に関連

PRがアップしました。コードをもう一度確認して、新しいバージョンをプッシュします。 PRコードに問題があると思われる場合は、遠慮なくコメントを書き込んでください。 @ suresh2018 @ nachocoig

1.3.7が出ました。 それでも問題が解決しない場合はお知らせください。患者さんに感謝します。

@bfwg

1.3.6はクリックキャンセルエラーを示しましたが、1.3.7はこのエラーを示していません。
このバージョンでは、ドラッグスクロールもモバイルでは機能しません。

前もって感謝します

image

動作しない1.3.7

@ suresh2018それは私のために働いています。 デスクトップビューでドラッグスクロールは機能していますか?

デスクトップは正常に動作していますが、moblieではありません(iphone 6 plus)

奇妙なことに、カルーセルコードのチャンクを見せてくれませんか。 実際のデバイスで試しましたか?

*水平スクロール*

div class = "hideoverflow"ドラッグスクロール

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

          div

タッチデバイスでドラッグスクロールデモ(README.md内)を試したことはありますか?

@rahil

デモドラッグスクロールが機能しないタッチデバイス

@ suresh2018 @bfwg Ionic2プロジェクトでこの

  1. ドラッグスクロールが使用されている画面では、その画面のすべてのクリックイベントが無効になります
    例えば
<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"は、ドラッグスクロールコンポーネント全体を画面から削除します(Ionic2)。 「false」はそうではありません。

こんにちは、 @ rahil051

  1. クリックイベントが発生しないのはv1.3.7で修正されています。
  2. 固定属性には、 scrollbar-hidden="true"または単にscrollbar-hiddenを書き込む必要があります。 属性をコンポーネント内の変数にバインドする場合は、角かっこを使用するときに[scrollbar-hidden]="flagVariable"メモを記述する必要があります。

詳細については、 https://github.com/bfwg/angular2-drag-scroll/blob/master/demo/app/home/home.component.html#L26をチェックアウトして

@ suresh2018 iPhone 6Plusでタッチの問題を再現できませんでした。 デモアプリでテストしています。 このリポジトリのクローンを作成し、 npm install && npm startを実行して、ポート:4200デモアプリを起動できますか? Chrome devtoolを使用して、機能しているかどうかを確認できます。

こんにちは@bfwg 、返信が遅くなってすみません(私はミニバケーションにいました; D)

私はあなたのAngularコンポーネントのデモを再インストールしました、そしてはい、それはモバイルバージョンで動作します!
私もそれを私のアプリに使ってみました、そしてそれもうまくいきます!

ご清聴ありがとうございました!

よくやった!

こんにちは@bfwg

最後に、私はこの問題を見つけます。
水平方向の幅を設定する必要があり、それだけが機能します

ありがとう ..

こんにちは@bfwg
最後に、私はこの問題を見つけます。
水平方向の幅を設定する必要があり、それだけが機能します
ありがとう

君たちのために働いた甘くてうれしい。 これで、この問題を安全に解決できます。

この問題を再度報告していただきありがとうございます。

ねえ、これは群を抜いて最高のng2カルーセルライブラリです! しかし、私はそれをモバイルで動作させることができないようです。

  • デモアプリはデスクトップとモバイルで正常に動作します
  • 私のコードはデスクトップでのみ機能します。 ドラッグはモバイルでは機能しません

水平方向の幅を設定する必要があり、それだけが機能します

ドラッグスクロール、ドラッグスクロールの外側のラッパー、ドラッグスクロール内のdiv(すべての可能な組み合わせ)でwidth:100%を設定しましたが、まだ機能していません。

編集:
リポジトリのクローンを作成し、モバイルにデプロイしてテストしましたが、正常に動作します。 home.componentと同じhtmlとcssがありますが、ドラッグはデスクトップでのみ機能します。 私のプロジェクトでは角張った素材は必要ないと思います。

ねえ@kzntswsk 、フィードバックをありがとう。 https://plnkr.co/で小さなデモを作成できます

ねえ@kzntswsk 、フィードバックをありがとう。 https://plnkr.co/で小さなデモを作成できます

私もこれに遭遇しました。 現在plnkrを実行することはできませんが、 scrollbar-hidden="true"のみ実行できるようですが、 scrollbar-hiddenだけでは何も実行されません。

編集:開発ツールで.drag-scroll-contentoverflow: hidden auto;選択を解除すると修正されますが、スクロールバーが再び表示されます。 したがって、これはモバイル用のスクロールバーを非表示にするために使用される方法に関係しているように思われます。

問題は、デバイスモードのChrome開発ツールでイベントが発生しないことです

このページは役に立ちましたか?
0 / 5 - 0 評価