小型マルチページプログラムコンポーネント-swipeスイッチ、およびプルダウンリフレッシュ、ラジャのアップロード、メニューの動的リンクスイッチをサポートしています

 

序文

  最近、下記のようにプロジェクトは、それが結果と同様の情報クラス複数ページのアプリの切り替え、のようなものを達成するための小さなプログラムである必要が発生しました:

  

  正味の効果:

  

 

1.機能解析

  まず、この機能を実現するためには、3つのステップに分かれています。

  • トップメニューメニューを達成
  • マルチページのスライドスイッチ
  • カスタムプルダウンリフレッシュのためとECLACのアップロードのサポート

2.分析を実装します。

  トップメニューメニュー:  

    PO主は同様の構成要素を書いた難易度、ので、この直接のビンを決定するために、結果を達成するために、この機能の外観。

  マルチページのスライドスイッチ:

    このアプレットでは、マイクロチャネル効果が直接swiperに逃げる、実施が比較的容易です。

  ラジャに含まれています。

    swpierスクロールビューの内側に適用し、うまくbindscrolltolowerスクロールビューのイベントを監視します。

  プルダウンリフレッシュ: 

    ここではインとアウトはここに実装を変更するには、3つの方法がある経口マスター、ドロップダウンロードに焦点を当てています。次のように:

      touchendを達成するためのonscrollの1.scrollビュー

        これを達成するために、比較的簡単な方法から。最後touchendは、現在のscrollTopスプライトがドロップダウンするかどうかを決めるリフレッシュが、ない柔軟性がないため、このアプローチは唯一、IOS、アンドリュースのスクロールビューに影響を与える可能性があります達成するために現在の負のscrollTopスプライトを判断するonscrollスクロールビューのイベントでスクロールscrollTopスプライトがドロップダウンには負のが、IOSだまさ未満のデータのページが、そこではありません問題はないだろう。そして、捨てられました。

      touchstart、touchmove、touchendの2スクロールビューを実現しています。

        这种方式就是参考h5自定义下拉刷新的方式去实现。这种实现方式的好处就是不会在安卓上不动了,也不会在ios没数据的时候也滑不动了。但是,这里不知道是po主写的姿势有问题还是咋回事,正常下拉时候没问题,但是配合swiper左右切换的时候效果惨不忍睹。遂弃用。当然如果有高手是通过这种方式实现的并且配合swiper使用没问题的请告诉我。

      3. 还是scroll-view,这次po主在scroll-view 外面套了个movable-area。

        因为之前用movable-area做侧滑删除的时候效果就很nice,所以最后想着这里用来做下拉刷新是不是也会比较好。经过实践证明,确实是非常好。而且安卓ios都能正常下拉。在siwper切换时候,由于这里用的movable-area也是原生组件所以相互影响就很小了,不像方法2里面自定义手势,不同方向去滚动效果就很惨烈。当然这里说的是影响小,并不是没有,不过在不是特别剧烈的操作下,效果基本是ok的。

3.代码实现

   由于代码比较多,不好一一贴出来,所以直接上项目地址了(求star):

 

  

 

 

おすすめ

転載: www.cnblogs.com/haha1212/p/11184595.html