Simona&Peter

模拟ios滚动选择弹框

Zhang Xiao -

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

还有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