视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
移动HTML5仿UIPickerView_html/css
2020-11-27 16:29:47 责编:小采
文档

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', //容器idconstraintsId:'wower', //约束idkUP:{ 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/ , 感谢 。

    效果图

    下载本文
    显示全文
    专题