最近工作中，碰到了一个页面中的PICKER,首先想到了MUI，但感觉不是我想要的，而且MUI也太笨重了，然后又去找了JQ的许多插 件，也感觉不是我想要的，所以决对自己封装起来，后期再用或改动，也比用别人的方便。
CSS文件：
.my_pickerwk{position: relative; height: 100%; width:100%;display: flex; display: -webkit-flex; flex-flow:row nowrap;}
.my_pickerk{ height: 100% ;; overflow:hidden;flex:auto;-webkit-overflow-scrolling: touch; padding-right: 2rem;
}
.my_picker_ul{ margin: 0px auto; padding: 0px 0px; margin-left: 0px; width:130%; height: 100%;overflow-y: scroll; background: #fff; /*padding-top: 60px;*/ }
.my_picker_ul li{ list-style-type: none; text-align: center;; font-size: 14px;;background: #fff; line-height: 40px; height: 40px; color: gray;;}
.my_picker_ul li:last-child{ /*margin-bottom: 160px;*/}
.filter{ position: absolute; height: 40px; line-height: 40px; width:100%; /*top:60px; */background: #ff7700; opacity:0.2}
.my_picker_ul .active{ font-size: 20px !important; color: #1f1f1f !important; font-weight: 600;}JS插件：（需要单独搞成JS文件）
(function ($)
{
$.fn.my_picker=function(opi)
{
var self=
{
con:'',// 父容器
data:[],//插入数据
fun:"",//回调函数,数组形式返回，返回数据长度等于列数【1：00，2：00】，类型为字符串
}
var picker=$.extend(self,opi);
picker.itemH=40;//单个LI选项的高度
picker.conHeight=0;
picker.inter="";
picker.oldscrolltop=0;
picker.obj="";
init()
function init(){
picker.conHeight=$(picker.con).height();
insert()
}
function insert()
{
var divwk=document.createElement("div");
divwk.setAttribute("class","my_pickerwk");
for(let i=0;i<picker.data.length;i++)
{
var divk=document.createElement("div");
divk.setAttribute("class","my_pickerk")
var ul=document.createElement("ul");
ul.setAttribute("class","my_picker_ul");
ul.onscroll=function(e){js(e.target)};
ul.style.paddingTop=(picker.conHeight/2-picker.itemH)+"px"
for(let y=0;y<picker.data[i].length;y++)
{
var li=document.createElement("li");
y==0 ? li.setAttribute("class","active") : "" ;
li.innerHTML=picker.data[i][y].text;
li.id=picker.data[i][y].value
li.style.height=picker.itemH+"px";
li.style.lineHeight=picker.itemH+"px";
ul.appendChild(li);
y==picker.data[i].length-1 ? li.style.marginBottom=(picker.conHeight-picker.itemH)+"px" : "" ;
}
divk.appendChild(ul)
divwk.appendChild(divk)
}
picker.con.appendChild(divwk)
var divfilter=document.createElement("div");
divfilter.setAttribute("class","filter");
divfilter.style.height=picker.itemH+"px";
divfilter.style.top=(picker.conHeight/2-picker.itemH)+"px"
divwk.appendChild(divfilter);
}
function js(obj)
{
if(picker.inter){clearInterval(picker.inter)}
picker.obj=obj
picker.oldscrolltop=obj.scrollTop;
picker.inter=setInterval(function(){
if(picker.obj.scrollTop==picker.oldscrolltop)
{
clearInterval(picker.inter);
check()
}
},100)
move();
}
function move(){
var $liobjs=$(picker.obj).children("li");
$liobjs.each(function(index,item){
var y=(index)*picker.itemH
if( (picker.oldscrolltop>y-1) && picker.oldscrolltop<y+picker.itemH)
{
$(picker.obj).children("li").removeClass("active")
$(item).addClass("active")
}
})
}
function check(){
var $liobjs=$(picker.obj).children("li");
$liobjs.each(function(index,item){
var y=(index)*picker.itemH
if( (picker.oldscrolltop>y-1) && picker.oldscrolltop<y+picker.itemH)
{
$(picker.obj).children("li").removeClass("active")
$(item).addClass("active")
$(picker.obj).scrollTop(y)
}
})
getData();
}
function getData(){
//alert(1)
var arr=[];
$(".my_picker_ul").each(function(){
$(this).children("li").each(function(){
if($(this).hasClass("active"))
{
arr.push(this.id);return false;
}
})
})
picker.fun(arr)
}
}
})(jQuery);
HTML调用：（引入JQ,及上面的JS文件）
<div class="test" style="height: 300px; background: #fff; width:100%; margin-top: 50px; overflow: hidden;;"></div>
<a id="a">aaaaa</a>
<script>
$("#a").my_picker({
con:document.querySelector(".test"),
data:[
[
{value:1,text:"1 ：00"},
{value:2,text:"2 ：00"},
{value:3,text:"3 ：00"},
{value:4,text:"4 ：00"},
{value:5,text:"5 ：00"},
{value:6,text:"6 ：00"},
{value:7,text:"7 ：00"},
{value:8,text:"8 ：00"},
{value:9,text:"9 ：00"},
{value:10,text:"10 ：00"},
{value:11,text:"11 ：00"},
{value:12,text:"12 ：00"}
],
[
{value:1,text:"1 ：00"},
{value:2,text:"2 ：00"},
{value:3,text:"3 ：00"},
{value:4,text:"4 ：00"},
{value:5,text:"5 ：00"},
{value:6,text:"6 ：00"},
{value:7,text:"7 ：00"},
{value:8,text:"8 ：00"},
{value:9,text:"9 ：00"},
{value:10,text:"10 ：00"},
{value:11,text:"11 ：00"},
{value:12,text:"12 ：00"}
]
],
fun:function(res){//回调函数，参数为返回选中的值，如果数组有三组，则返回RES的数组长度也为3
//alert(res[0]+"----------------"+res[1])
}
})
</script>
）