ホームページ  >  記事  >  WeChat アプレット  >  WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装

WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装

零下一度
零下一度オリジナル
2017-05-22 13:23:422643ブラウズ

グループ開発と左スワイプ機能を実装するために、今日の全体的なアイデアを見てみましょう:
グループ管理ページに入ります -->新しいグループをクリックして新しいグループを作成します
基本操作のためにグループ化されていないページに入ります
作成したグループの下部メニューバー「アクション」→「連絡先から追加」に入り操作します。

WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装



基本的なプロセスを整理した後、開発を開始しました。まずは全体のレイアウトをご覧いただき、順を追って説明していきます。

WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装



static レイアウトをレイアウトした後、もちろん、それを引き起こしたのは

WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


です。

表示ウィンドウ

WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


キャンセルをクリックして消えます

WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


内部の入力ボックスの内容が変更された場合、bininput
イベントを使用しないでください。ここでのbindchangeイベントは、フォーカスが失われた場合にのみトリガーされます。

WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


入力ボックスイベントが発生すると、OK
ボタンがクリック可能状態になります 空の場合、addTeam

WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


スタイル
データバインディング

WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


フォームがある場合はfromを使用します。

WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


グループリクエストインタラクションを作成します。

WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


これでグループの作成が完了しました。なぜ自分で実装するのではなく、WeChat が提供するモーダル ボックス コンポーネントを使用しないのかという疑問がたくさんあるかもしれません。これも非常に面倒なので、付属のモーダル ボックス コンポーネントを使いたいのですが、モーダル ボックスでフォームを送信するのが少し面倒に思えたので、直接カスタマイズしました。
作成されたグループは、左スワイプによる削除
と名前の変更をサポートしています。今日は、左スワイプによる削除の実装方法に焦点を当てます。最初に左にスワイプする必要があるのは、作成されたグループ化されていない項目はハードコーディングされているため、サポートされていないことです。 左スライド削除では、bindtouchstart と bindingtouchmove の 2 つのイベントを使用します。この ID は、ユーザーの作成後にバックグラウンドで生成された ID 番号を使用して、ここで使用します。この ID は一意であり、同じ ID にすることはできません。

WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


スタイルのレイアウトでは、親要素は

絶対配置
、子要素の削除はアニメーション効果を考慮して、css3アニメーション効果を追加しました。スライドアニメーション効果を与えます。

WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


次に、イベントの構成を見てみましょう: Bindtap は、クリックするとそのページに直接ジャンプします。



WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


左スワイプはタッチイベントから始まります。もちろん、外部で使用するパラメーターを定義するのが最善です:

WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


bindtouchStart が発生した後、bindtouchmove イベントが実行され、左または右にスライドするかどうかを決定できます:

WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


  • Var dataId = e.currentTarget.id //以前の一意の ID を取得します;

    If(key){ //ユーザーが長時間左にスワイプすると、複数の左スワイプ イベントが発生します。

  • タッチは、タッチ ポイント、タッチはタッチ ポイント

    配列 、各タッチ ポイントには次の属性が含まれます:

  • pageX、pageY: ドキュメントの左上隅からの距離、ドキュメントの左上隅が原点、横軸は X 軸、縦軸は Y 軸です。

  • screenX、screenY : 画面の左上隅からの距離、画面の左上隅が原点、横軸は X 軸、垂直軸は Y 軸です。

    ここでは clientX、clientY を使用します。
    X 軸のスライドが Y 軸より大きい場合、および終点と始点の値が値より小さい場合は、bindtouchstart のときに開始点を記録し、bindtouchmove のときにタッチの終点を記録します。感度を考慮して自分で設定してください。この設定は非常に小さいです)、右スワイプでも同様です。

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


    左と右のスワイプイベントを決定したら、データを現在のコンポーネントにバインドする必要があります。データはどこから来たのでしょうか?私の配列の起源と、それが左側のスライド イベントからどのように取得されるかを確認できます (私のデータは配列であり、wxml でブロックする必要があります)。

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


    このとき、必要な配列をループアウトした後、データのID ==現在イベントで操作されているIDである場合は、別の配列を追加します。
    配列の右に 15% を右にオフセットします。それ以外の場合は、右にスライドする場合と同様に、すべてを直接 0 に設定します。

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


    最後にデータをページにバインドします。

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


    OK、左スワイプ効果が達成されました。

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


    すべてがスクロールされている場合は、それを外側のレイヤーに追加し、X 軸をオフにすることを忘れないでください。

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


    このとき、クリックして左にスライドすると、クリックスルー効果が表示され、クリックイベントを発生させることなく問題を完全に解決できるキャッチが公式ドキュメントに記載されています。

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


    削除イベントをクリックすると、ユーザーが削除するかどうかを決定するモーダル ボックスがポップアップ表示されます。

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


    ここで、[キャンセル]をクリックするときに左側のスライドの削除ボタンを忘れずに削除する必要があります。これにより、ユーザーエクスペリエンスが向上する可能性があります。

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


    ここでのフォーム送信データの変換は少し複雑です (ビジネスニーズに応じて実行します。ここでのメソッドの学習に時間を費やす必要はありません)。 、バックグラウンドで必要なデータ形式に従って変換されて渡されます。

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装



    今日は、ホームページ A、B、C の固定小数点ジャンプ機能を実装する方法を考えてみます。

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装



    1つ目は、右側の小さなインデックスレイアウトとデータバインドです。レターの下に名刺がある場合、データバインディングは名刺リストの文字と同じです。 ID がない場合はレンダリングする必要はありません。現在の文字も右側に表示されているものと同じです:

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装



    group.name data:

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装



    これは、 # が id の設定 (つまり id="#") をサポートしていないため、変換が実行されたためです。

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装



    Click イベント: 現在の ID を取得し、データ toView を現在の ID にバインドします。

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装



    必ず
    data({modalHidden:true})を追加してください
    そうしないと、ページが読み込まれるとすぐにモーダルボックスが表示されます。

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装



    [グループ化されていない] ボタンをクリックして、グループ化されていない名刺リスト ページに入ります。

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装



    このレイアウトはホームページから完全にコピーし、後ろのデータインターフェースだけが変更されています。興味がある場合は、戻って見てください。前回のもの。
    複数選択をクリックすると、以下の複数選択ボックスといくつかの操作ボタンが表示されます。これらはすべてデータ バインディングであり、表示クラスと非表示クラスの実装は比較的簡単です。

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装



    複数選択の場合は、Boole スイッチを直接チェック済みに設定します。

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装


    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装



    クリックして入力すると、トップメニューボタンをクリックしてドロップダウンメニューバーが表示され、ここでWeChatが提供するコンポーネントが直接使用されます。

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装



    最後に名刺フォルダーから追加をクリックして次のページに入ります:

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装



    全体のレイアウトは基本的にホームページと同じです、私が勝ちましたここでは詳細には触れません。

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装



    トップメニューから直接データを複数選択してバインドするだけです。

    WeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装



    基本的に、フォームクラスに関係するものはすべてフォーム送信イベントからのものです。
    いくつかのインターフェースの欠陥を除いて、この記事の執筆時点では、グループ化のフロントエンド効果は基本的に達成されています。
    さて、ミニプログラム開発ツールでの写真のアップロードにはまだ問題があり、写真の保存ができないため、WeChatミニプログラム開発チュートリアルは終了しました。開発ツールが更新され、安定した後、もう一度試してみます。機会があれば、チュートリアルの内容を追加し、完成品をお見せします。
    継続的なサポートと関心に感謝します。このチュートリアルを参照して、独自のミニプログラム開発ルーチンを理解することができます。

【関連おすすめ】

1. WeChat ミニ プログラムの完全なソース コードのダウンロード

2. WeChat ミニ プログラムのゲーム デモ さまざまな色のブロックを選択します

3. WeChat ミニ プログラムを学習するための推奨デモ: チャットルーム +オーディオとビデオ+コンテンツの追加+

以上がWeChatミニプログラム開発(2) グループ開発と左スワイプ機能の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。