原生触摸选择插件

通用 react vue 原生JavaScript html

  <div> <button id="select_touch_start1">时间选择</button> <button id="select_touch_start2">城市选择</button> </div>

js

   import touch_select from 'touch-select'; import city_data from 'touch-select/data.js'; //这是插件内置的省市区数据 data.js 修改 或者自行调用接口获取 import "touch-select/touch-css.css"; /** *@生成选择时间 *@param {string}时间戳字符串 *@return JSON *@author 应进兵 */ function get_show_time(server_time){ var time_data={ mo_day_m:[], time:[] }; var temp=server_time ? new Date(server_time) : new Date(); var temp2=new Date(temp.getFullYear()+'/'+parseFloat(temp.getMonth()+1)+'/'+parseFloat(temp.getDate())+' '+temp.getHours()+':00:00'); var temp_hour=parseFloat(Date.parse(temp2)+(3600*(temp.getMinutes()>30 ? 1 : 0.5)*1000)); var now_hour=new Date(temp_hour); time_data.now_hour=now_hour.getHours(); time_data.now_min=now_hour.getMinutes(); for(var hours=0;hours<48;hours++){ time_data.now_min+=30; if(time_data.now_min===60){ if(time_data.now_hour<23){ time_data.now_hour+=1; }else { time_data.now_hour=0 } time_data.now_min=0 } time_data.time.push({hour:(time_data.now_hour<10 ? '0'+time_data.now_hour : time_data.now_hour),min:(time_data.now_min < 10 ? '0'+time_data.now_min : time_data.now_min)}); } var shijian=Date.parse(temp2); for(var time_day=0;time_day<99;time_day++){ var temp3=new Date(shijian); time_data.mo_day_m.push({year:temp3.getFullYear(),month:(parseFloat(temp3.getMonth()+1)< 10 ? '0'+parseFloat(temp3.getMonth()+1) : parseFloat(temp3.getMonth()+1) ),day:(temp3.getDate() < 10 ? '0'+temp3.getDate() : temp3.getDate()),date:temp3.getDay()}); shijian+=(3600*24*1000) } return time_data }; //返回中文星期几 function get_date(val){ switch (val) { case 0: return '星期日'; case 1: return '星期一'; case 2: return '星期二'; case 3: return '星期三'; case 4: return '星期四'; case 5: return '星期五'; case 6: return '星期六'; default : return '星期一' } }; function times(){ var touchSelect_ob={ time1:null, }; function touch_select_dom(xx){ return document.querySelectorAll(xx) } //获取时间对象 var time_data=this.get_show_time(new Date()); //拼接年月日html var dat={ time:'', day:'' }; for(var wws=0;wws<time_data.mo_day_m.length;wws++){ var conts_time=wws===0 ? '今天' :(time_data.mo_day_m[wws].month) +'月'+(time_data.mo_day_m[wws].day)+' '+ this.get_date(time_data.mo_day_m[wws].date); dat.day+='<li data-name="day" data-auto="data-自定义参数" data-value='+time_data.mo_day_m[wws].year+'/'+time_data.mo_day_m[wws].month+'/'+time_data.mo_day_m[wws].day+'>'+conts_time+'</li>' } for(var wwss=0;wwss<time_data.time.length ;wwss++){ dat.time+='<li data-name="time" data-auto="data-自定义参数" data-value='+time_data.time[wwss].hour+':'+time_data.time[wwss].min+'>'+(time_data.time[wwss].hour)+':'+(time_data.time[wwss].min)+'</li>' } /** * 调用时间选择插件 * param { * click_id:'string' 触发id * render:function(){} 添加节点函数 * touch_end_fn:function(){} 触摸结束钩子 * select_val:function(){} 确认按钮点击事件 * } * touchSelect_ob.time1.get_all_value() //获取所选值 * @author 应进兵 * */ //新建实例 touchSelect_ob.time1 = new touch_select(); //设置默认选中项 touchSelect_ob.time1.select_arr=[0,1]; //初始化实例 touchSelect_ob.time1.set_init({ title:'时间选择', click_id:'select_touch_start1', render:function (){ var tha=this; touch_select_dom('#ul_out'+tha.click_id)[0].innerHTML='<div><ul class="touch-select-ul">'+dat.day+'</ul></div><div><ul class="touch-select-ul">'+dat.time+'</ul></div>'; }, touch_end_fn:function () { //触摸结束事件 }, select_val:function(){ //点击确认获得选定值 var times=touchSelect_ob.time1.get_all_value(); touchSelect_ob.time1.close(); console.log(times) }, created:function () { //创建完毕执行 }, opened:function(next){ //设置选择器打开条件 如果定义了opened函数 必须执行next才会打开选择器 if(true){ next() } } }) }; function citys(){ var touchSelect_ob={}; var ct=city_data.data; function touch_select_dom(xx){ return document.querySelectorAll(xx) } //新建实例 touchSelect_ob.time2 = new touch_select(); //设置默认位置 touchSelect_ob.time2.select_arr=[0,0,0]; //初始化 touchSelect_ob.time2.set_init({ title:'城市选择', click_id:'select_touch_start2', render:function (){ var tha=this; //content节点 var dat={ privce:'', city:'', arr:'' }; //请根据 默认位置 渲染城市 否则将出现 初始化省市区不一致问题 for(var uy in ct.province){ dat.privce+='<li data-name='+ct.province[uy]+' data-auto="data-自定义参数" data-value='+uy+'>'+ct.province[uy]+'</li>'; } for(var uyx in ct.city[1]){ dat.city+='<li data-name='+ct.city[1][uyx].area_name+' data-value='+ct.city[1][uyx].area_id+'>'+ct.city[1][uyx].area_name+'</li>'; } for(var uyxx in ct.city[35]){ dat.arr+='<li data-name='+ct.city[35][uyxx].area_name+' data-value='+ct.city[35][uyxx].area_id+' >'+ct.city[35][uyxx].area_name+'</li>'; } touch_select_dom('#ul_out'+tha.click_id)[0].innerHTML='<div><ul id="province_t" class="touch-select-ul">'+dat.privce+'</ul></div><div><ul id="city_t" class="touch-select-ul">'+dat.city+'</ul></div><div><ul id="area_t" class="touch-select-ul">'+dat.arr+'</ul></div>'; }, select_val:function(){ //点击确认获得选定值 var times=touchSelect_ob.time2.get_all_value(); touchSelect_ob.time2.close(); console.log(times) }, touch_end_fn:function (data) { //设置联动渲染节点 var dat={ city:'', arr:'' }; var value=this.getAttribute('data-value'); if(this.id=='province_t'){ for(var ts in ct.city[value]){ dat.city+='<li data-name='+ct.city[value][ts].area_name+' data-value='+ct.city[value][ts].area_id+' >'+ct.city[value][ts].area_name+'</li>'; } touchSelect_ob.time2.set_city(dat.city); //渲染区 if(ct.city[value] && ct.city[value][0]){ setcitys(ct.city[value][0].area_id); } } function setcitys(value){ if(!value){return} for(var ts in ct.city[value]){ dat.arr+='<li data-name='+ct.city[value][ts].area_name+' data-value='+ct.city[value][ts].area_id+' >'+ct.city[value][ts].area_name+'</li>'; } touchSelect_ob.time2.set_arr(dat.arr); } if(this.id=='city_t'){ setcitys(value) } } }); }; times() citys()