モバイル HTML5 模倣 UIPickerView_html/css_WEB-ITnose

UIPickerView

これは、iOS の UIPickerView を模倣するように作成されたモバイル H5 ページ用の UI プラグインであり、あらゆるプロジェクトに適応でき、ライブラリやフレームワークに依存しません。

タグ v1.0

センザンコウ百科

要件

• iOS 7.0+

• android 4.1+

読む前に使用してください

このプラグインの設計原理は次のとおりです複数の小さな UIPickerView を 1 つの大きな UIPickerView に組み立てます。この UIPickerView は、UIPickerView のコア操作部分とアニメーションのみを担当します。この設計の利点は、非常に柔軟に組み立てることができ、さまざまなシナリオに適していることです。

このプラグインは、UIPickerView と CAAnimation の 2 つのクラスで構成されます
UIPickerView は、iOS の操作と一致するコア部分を担当します
CAAnimation は、コンテナ アニメーションの表示と非表示のみを担当します
デモの例では、最初に [ピッカーを開く] をクリックした場合、エラーの理由は、最初に UIPickerView のインスタンスを作成していないことです

それを使用してください

UIPickerView

クラスをインスタンス化する必要があります。UIPickerView クラスには、単純なクラス メソッド createPickerView も用意されています。を使用して、UIPickerView をすばやく作成します。 各パラメータの意味は次のとおりです:

dataSource データ ソースの構造は、特定のビジネス キーに依存します。関数は独自のニーズに応じて構造を定義できます。 :

dataSource:data,  //数据源id:'picker', //容器idconstraintsId:'wower', //约束idkUP:{    kUPCELLHEIGHT:44, //行高    kUPFRICTION:0.003 //动画速率},valueChange:function(data){ //选择一项会触发的valueChange事件回调    //UPNotificationCenter.postNotificationName('UPK',data);}

UIPickerView は 3 つの操作メソッドを提供します

UPRender() コンテンツ領域部分を再レンダリング

UPSelectRowIndexPath() 特定の行をカスタム選択

UPThen() After行を選択すると、このコールバックで何かを行うことができます。 いくつかのこと

アニメーション ドライバー

var data = [        {            "key":"index", //下一个UIPickerView数据源的键            "value":"index" //当前值        },]

CAAnimation を使用してアニメーションを作成すると、UIPickerView は 1 つのコンテナーに複数のアニメーションを実装でき、表示されたアニメーションの実行は CAAnimation で実行できます。

idはアニメーションが必要なコンテナIDを指定します

WebKitanimationのアニメーションパラメータをサポートできます

メモ

素材の写真は置き換えることができます PS：（より美しくするために手伝ってくれるアーティストを見つけてください）

セルの高さカスタマイズ可能、要件はCSSの行の高さと一致することであり、2で調整できます
コンテナの外側のCSSとレイアウト方法は、特定のビジネスに応じて置き換えることができます
• ありがとう

画像UIPickerView の素材はここからダウンロードできます -- http://cubiq.org/、

ありがとう

。

レンダリング