注：必須在手機模式下才有效

組件效果圖

組件效果圖

使用示例

html

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

html+='

' + 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

y_result = min;

}

ul.stop();//停止當前動畫

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');

}

}

總結

以上是生活随笔為你收集整理的html 仿ios选择控件,仿ios垂直滚动选择的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。