モバイル 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);}
UPRender() コンテンツ領域部分を再レンダリング
UPSelectRowIndexPath() 特定の行をカスタム選択
UPThen() After行を選択すると、このコールバックで何かを行うことができます。 いくつかのこと
アニメーション ドライバー
var data = [ { "key":"index", //下一个UIPickerView数据源的键 "value":"index" //当前值 },]
idはアニメーションが必要なコンテナIDを指定します
WebKitanimationのアニメーションパラメータをサポートできます
メモ
素材の写真は置き換えることができます PS:(より美しくするために手伝ってくれるアーティストを見つけてください)
- セルの高さカスタマイズ可能、要件はCSSの行の高さと一致することであり、2で調整できます
- コンテナの外側のCSSとレイアウト方法は、特定のビジネスに応じて置き換えることができます
- ありがとう
ありがとう
。レンダリング

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

この記事では、html5< time>について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
