仿ios垂直滚动选择

---

下载完整demo

注：必须在手机模式下才有效

组件效果图

使用示例

---

html

<div class="box">
    <div class="select">div>
    <div class="box1" id="box1">div>
    <div class="box2" id="box2">div>
div>

css

.box{
    margin: 20px auto 20px auto;
    height: 188px;
    width: 90%;
    position: relative;
}
.box1{
    position: absolute;
    height: 100%;
    width: 60%;
    border-right: 1px solid #aaa;
    left: 0;
}

.box2{
    right: 0;
    position: absolute;
    height: 100%;
    width: 40%;
}
.select{
    position: absolute;
    height: 50px;
    width: 100%;
    top: 70px;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
}

js

$(function(){
    option1 = ['事业单位','省考公务员','国家公务员','政治与法','教师考试','清华大学','北京大学'];
    _S1 = new A_ScrollSelect('box1');
    _S1.init(option1);

    option2 = ['北京','上海','广州','深圳','武汉','成都','重庆'];
    _S2 = new A_ScrollSelect('box2');
    _S2.init(option2);
})

方法

---

init()

初始化

reLoad(array)

重新加载选择数据
参数为数组
例:

option2 = ['北京','上海','广州','深圳','武汉','成都','重庆'];  
_S1.reLoad(option2);

getValue()

获取用户当前选择数据
例：

_S1.getValue();

源码

---

/*
滚动选择
移动端
*/

function A_ScrollSelect(div){//传进来的或许是一个div id 也可能是一个jQuery div

    this._liH = 33;
    this._locationY = 0;//上一次的坐标
    this._locationStart = 0;//开始触摸时的坐标

//  ----------------------------
    this._H_action = 50;
    this._H_2 = 36;
    this._H_3 = 33;
    this._H_hide = 33;

    this._H_ul = 188;
    this._top_max = 0;
//  --------------------------------------

    this._init = false;

    this.reLoad = function(data){
        this._box.empty();
        this._init = false;

        this.init(data);
    }
    this.init = function(data){
        if(this._init){return;}
        if(typeof div == 'string'){
            var box = $('#'+div);
        }else{
            var box = div;
        }

        this._box = box;
        this._data = data;

        if(data){
             this.createDOM(data);
             this._num = data.length;
        }
        this.bindEvent();

        this.setTop(2);//设置顶部高度
        this.setGear(2);//置初值
        this._init = true;
    }

    this.createDOM = function(data){
        var html = '';
        html+='
';
        html+='
';
        html+='
';
        html+='
';

        for(var i=0;i'
 ' + data[i] + ' 
';
        }   
        html+='
';
        html+='
';
        this._box.append($(html));
    }
    this.bindEvent = function(){
        var self = this;
        var box = this._box;

        box.on('touchstart',function(e){
            self.gearTouchStart(e);
        });
        box.on('touchmove',function(e){
            self.gearTouchMove(e);
        });
        box.on('touchend',function(e){
            self.gearTouchEnd(e);
        });
    }
    //触摸开始
    this.gearTouchStart = function(e) {
        var y = e.originalEvent.changedTouches[0].pageY;
        this._locationStart = y;//初始值
        this._locationY = y;

    }
    //手指移动
    this.gearTouchMove = function(e) {
        var self = this;
        var y = e.originalEvent.changedTouches[0].pageY;
        var ul = this._box.find('ul');      
        var marginTop = parseFloat(ul.css('margin-top'));
        var seat_y = this._locationY;//上一次的位置
        var y_result = marginTop + y - seat_y;

        var min = (this._num-1) * this._H_hide * -1;
        if(marginTop>0){
            y_result = 0;
        }
        if(marginTop//停止当前动画
        ul.css({'margin-top':y_result});//滚动
        seat_y = y;
        var h_li = this._liH;//单个列的高
        var margin = marginTop;
        var difference = Math.abs(marginTop - seat_y);

    //  变换样式
        if(difference > h_li/2){

            var multiple = parseInt(margin/h_li) * -1 ;

            this.setGear(multiple);
        }
        this._locationY = y;
    }
    //离开屏幕
    this.gearTouchEnd = function(e) {
        var ul = this._box.find('ul');  
    //  取整
        var h_li = this._liH;
        var margin = parseFloat(ul.css('margin-top'));
        var difference = margin % h_li;

        if(difference > h_li/2){
            y_result = margin - difference + h_li;
        }else{
            y_result = margin - difference;
        }

        var min = (this._num-1) * this._H_hide * -1;
        if(margin > 0){
            y_result = 0;
        }
        if(margin < min){
            y_result = min;
        }
        ul.animate({'margin-top':y_result},'normal');
    }
    this.getValue = function(){
        return this._box.find('.list-title-action').html();
    }
    //控制插件滚动后停留的值
    this.setGear = function(val) {
        var multiple = val;
        var li = this._box.find('li');
        if(val < 0||val>(this._num-1)){return;}

        li.attr('class','list-title-hide');
        li.eq(multiple).attr('class','list-title-3');
        li.eq(multiple+1).attr('class','list-title-2');
        li.eq(multiple+2).attr('class','list-title-action');
        li.eq(multiple+3).attr('class','list-title-2');
        li.eq(multiple+4).attr('class','list-title-3');

    }
    this.setTop = function(n){
        var self = this;
        var value = n;//减去标题2和标题3  再加上两天假数据
        if(value < 0){value = 0;}
        if(value >= self._num-1){value = self._num-1;}  
        var ul = this._box.find('ul');  
        var h = this._H_hide;
        ul.animate({'margin-top':-1*h*n},'normal');
    }
}