原生JS封装自己的Picker

移动端选择器随处可见，现在自己封装了一个ZnPicker，基于原生，体积小（压缩后仅4K），易调用

效果预览：轻戳

使用说明

<body>
  <div id="ZnPicker"></div>
  <script src='ZnPicker.js'></script>
  <script>
    var picker=new ZnPicker({
      dataArea:{min:1,max:199,unit:'岁'},
      // dataSource:[{name:'张三',id:1},{name:'李四',id:2},{name:'王五',id:3}],
      title:'请选择年龄',
      defaultSite: 122,
      lineHeight:36
    })
    picker.show()
    picker.onChange=function(data){
      alert(data)
    }
  </script>
</body>

参数说明

Options/callBack	Description	Required
title	Picker标题	false
defaultSite	默认起始位置	false
lineHeight	单个行高	false
dataArea	区间数据源，和dataSource有且只有一个/callback返回区间数	true
dataSource	列表数据源，和dataArea有且只有一个/callback返回数据id	true
show	Picker显示	/
onChange	选中后的回调函数	/

请允许我记录一点小东西

onmouseenter 与onmouseover的区别是 onmouseenter不支持冒泡事件
Chrome模拟器不支持 on事件如ontouchstart 需要用addEventListener 添加
css3 transition对应有一个js结束事件 transitionend，只支持addEventListener 添加
- // Safari 3.1 到 6.0 代码
  
  document.getElementById(“myDIV”).addEventListener(“webkitTransitionEnd”, myFunction);
- // 标准语法
  
  document.getElementById(“myDIV”).addEventListener(“transitionend”, myFunction);

移动端页面event.preventDefault()需要加一个判断，开始向下move 和底部向上滑动则阻止默认行为，否则页面不能滚动

2017-06-15