模拟ios滚动选择弹框

突然发现用别人的插件挺好的,就琢磨着我是不是应该也写一个试试(就是就是发现自己啥都不会哈哈哈),然后大概有了思路就开始动手,写了好久感觉越写越乱了。。。现阶段这版只是能用。。写的过程中也发现了和思考了不少东西,对于怎么组织好代码更优雅还是有不少困惑,不过呢慢慢来吧,多练习多思考才是王道,其他各种浮躁的情绪只能帮倒忙。。。简单介绍一下其功能,具体代码有兴趣的可以去这里看看点击这里

还有todo就是增加多列并动态加载数据的功能


安装

  • 引入iscroll-probe.js
  • 引入xScrollSelect.js
  • 引入xScrollSelect.css

使用示例


var xs = new xScrollSelect({
    spaceNum: 2, //预留的格子数, 即选择空白区域所占的格子数, 默认为2
    itemWidth: 40, //每个格子的宽度单位px,默认为40
    showCover: true, //是否展示背景遮罩,
    probeType: 2, //iscroll配置参数,表示scroll监听中切换active的class的检查灵敏度,取值1,2,3越高越灵敏,默认为2
    //需要展示的数据, name是展示名称,其他数据可以放入每个{},回调时会把选中的数据原样返回
    items: [
    	{name: '第一个'},
    	{name: '第二个'},
    	{name: '第三个', id: 200},
    	{name: '第四个'}
    ],
    onScrollEnd: function(params) {
      /*回调方法当用户选择停止时触发
      params返回格式 
       {
          index: 0,
          data: {
            name: '第三个',
            id: 200
          }
       }
      */
    },
    onConfirm: function(params) {
    	//回调方法当前用户按确认按钮时候触发,params同onScrollEnd中的格式
    }
});

//实例方法
//展示
xs.show();
//隐藏
xs.hide();

demo

demoshow