js移动端那些事之iosSelect.js

 iosselect是在webapp下的一个picker组件，可以轻松实现各类选择器效果。比如地区选择 时间选择 日期选择等。网上教程是很多的，github详解：https://github.com/zhoushengmufc/iosselect ，好上手，兼容性也不错，不过还是会有点小问题，这里要说的是制作三级联动时出现的问题。

在写好样式和功能后，在chrome里调试效果没问题后，导入到项目里，Android下微信运行流畅无问题，如下图。

然而ios下微信打开就有个小bug，如下图。

这边处理方案也是要分开处理，先是给iosSelect.css修改样式，加个margin-top：-44px

.ios-select-widget-box header.iosselect-header a.close {
   float: left;
   padding-left: 12px;
   height: 44px;
   line-height: 44px;
   margin-top: -44px;
}
.ios-select-widget-box header.iosselect-header a.sure {
   float: right;
   padding-right: 15px;
   height: 44px;
   line-height: 44px;
   margin-top: -44px;
}

添加了以后ios样式就正常了，Android的确定和取消键就上移了，这时候就去iosSelet.js里面修改源代码，注意这是用原生js写的，不要用jquery。

搜索'click'，进行如下修改。

bindEvent: function() {
   var sureDom = this.el.querySelectorAll('.sure');
   var closeDom = this.el.querySelectorAll('.close');
   var self = this;
   for (var i = 0, len = sureDom.length; i < len; i++) {
      if(isAndroid()){
         sureDom[i].style.marginTop = '0';
         closeDom[i].style.marginTop = '0';
      }
      // sureDom[i].setAttribute('style','color:blue')
      sureDom[i].addEventListener('click', function(e) {
         self.close();
      });
   }
   for (var i = 0, len = closeDom.length; i < len; i++) {
      closeDom[i].addEventListener('click', function(e) {
         self.close();
      });
   }
},

一切搞定就ok了。