UIPickerView

這是用來仿造iOS中的UIPickerView而編寫的適用于移動端H5頁的UI插件，可以適配在任何項目中，不依賴任何庫或框架。

Tag v1.0

Requirements

• iOS 7.0+

• android 4.1+

使用之前請閱讀(used befor reading)

這個插件的設計原則是，通過多個小的UIPickerView組裝成一個大的UIPickerView，它只負責UIPickerView的核心操作部分與動畫，這樣設計的好處，是可以很靈活的進行組裝，適用于多個不同的場景。

• 這個插件由UIPickerView和CAAnimation兩個類組成
• UIPickerView負責與iOS操作一致的核心部分
• CAAnimation則只負責容器動畫的顯示與隱藏
• Demo例子中如果先點擊open picker報錯的原因是，你還沒有先創建一個UIPickerView的實例

Use it

需要實例化UIPickerView類，UIPickerView類也提供了一個簡單的類方法，createPickerView來快速創建一個UIPickerView。

在使用之前還需要傳入一個配置obj參數對象，各參數意義如下：

dataSource:data,  //數據源
id:'picker', //容器id
constraintsId:'wower', //約束id
kUP:{
    kUPCELLHEIGHT:44, //行高
    kUPFRICTION:0.003 //動畫速率
},
valueChange:function(data){ //選擇一項會觸發的valueChange事件回調
    //UPNotificationCenter.postNotificationName('UPK',data);
}

dataSource數據源的結構，渲染DOM結構依賴key，value鍵，具體的業務功能可以根據自己的需求來定義結構：

var data = [
        {
            "key":"index", //下一個UIPickerView數據源的鍵
            "value":"index" //當前值
        },
]

UIPickerView提供了三個方法來操作

UPRender() 重新渲染內容區域部分

UPSelectRowIndexPath() 自定義選擇某一行

UPThen() 選擇了一行之后可以在這個回調中再做某些事情

動畫驅動

animd = CAAnimation.createAnimation({id:'picker-wraper'});
animd.start(); //開始
animd.finish(); //完成

使用CAAnimation來創建一個動畫，UIPickerView可以實現多個在一個容器中，顯示的動畫執行可以在CAAnimation中執行。

id 指定需要動畫的容器id

WebKitanimation的動畫參數都可支持

注意事項

• 素材圖片可替換PS:（找個美工妹紙幫你做漂亮些）
• cell的高度可定制，要求與css中的行高一致，并且可以與2取余
• 容器外css以及如何布局，都可以根據業務具體來替換，

感謝

UIPickerView的圖片素材是在這里下載的--http://cubiq.org/，感謝。

效果圖

https://github.com/lcepy/loseYourself