UDN-企业互联网技术人气社区

板块导航

浏览  : 1002
回复  : 4

[原生js] iosselect:一个js picker项目,在H5中实现IOS的下拉效果

[复制链接]
htmlman的头像 楼主
发表于 2017-1-10 15:19:22 | 显示全部楼层 |阅读模式
  具体文档和demo可以访问github: https://github.com/zhoushengmufc/iosselect

  移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的picker,安卓下各浏览器展示各异,我们需要一个picker组件来统一各端下各种浏览器的展示。

  iosselect是在webapp下的一个picker组件,可以轻松实现各类选择器效果。比如地区选择 时间选择 日期选择等。

  下面是一个地址选择器demo截图,可以访问: http://zhoushengfe.com/iosselect/demo/three/area.html
1.png


  可以查看demo:

  地址选择器

  时间选择器

  iosselect接口丰富,适用于多类场景

  可以定制依赖关系,规定各层级之间是否有关联。

  可以定制选择层级,支持1-5层选择。

  可以定制各项高度,可以规定展示项数,默认展示7项。

  移动端rem应用普遍,无论你是px还是rem,使用iosselect都完全不是问题。

  可以提供静态数据,也可以使用方法获取数据,支持同步方法和异步方法。

  iosselect基于iscroll5开发,除此外无任何依赖,所以无论你是react还是angular还是vue还是zepto jquey都不是问题。
  1. new IosSelect(level, data, options)
  2.     level: 级联等级,支持1,2,3,4,5 必选项
  3.     data: [oneLevelArray[, twoLevelArray[, threeLevelArray, [fourLevelArray, [fiveLevelArray]]]]] 除了用数组,也可以用方法
  4.     options:
  5.          container: 组件的父元素,传入css3选择器,比如'.a' 或 '#a'之类的
  6.          callback: 选择完毕后的回调函数 必选
  7.          title: 选择框title  可选,没有此参数则不显示title
  8.          itemHeight: 每一项的高度,可选,默认 35
  9.          headerHeight: 组件标题栏高度 可选,默认 44
  10.          cssUnit: css单位,目前支持px和rem,默认为px
  11.          addClassName: 组件额外类名 可选,用于自定义样式
  12.          relation: [1, 1, 0, 0]: [第一二级是否关联,第二三级是否关联,第三四级是否关联,第四五级是否关联] ,默认不关联,即默认是[0, 0, 0, 0]
  13.          oneLevelId: 第一级选中id 可选
  14.          twoLevelId: 第二级选中id 可选
  15.          threeLevelId: 第三级选中id 可选
  16.          fourLevelId: 第四级选中id 可选
  17.          fiveLevelId: 第五级选中id 可选
  18.          showLoading: 如果你的数据是异步加载的,可以使用该参数设置为true,下拉菜单会有加载中的效果
  19.          itemShowCount: 组件展示选项数目 可以为3,5,7,9 默认为7
复制代码

  API丰富:
2.png

  原生JS实现适用于所有框架:
1.png

  具体文档和demo可以访问github: https://github.com/zhoushengmufc/iosselect

相关帖子

发表于 2017-1-10 15:19:53 | 显示全部楼层
无论是不是沙发都得回复下
使用道具 举报

回复

发表于 2017-1-10 15:19:54 | 显示全部楼层
回帖支持下楼主,请眼熟我,我叫“一剑→嗜血“
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部