问题描述
mui picker ios16.2系统及以上，选择器滚动错误错乱，显示异常但是可以正常选择
用多个ios手机测试了，凡是升级到16.2及以上的均会产生这个的问题。
使用官方的示例，放到升级到16.2的ios手机上测试，问题同样存在
https://www.dcloud.io/hellomui/examples/picker.html（这是官方案例，请点击测试）
解决方案
这是一个老哥提供的解决发方案，没能完全解决我的问题，但是至少解决了一部分，具体操作就是
- 找到mui.picker.css（或者其他压缩过后的mui.picker.min.css）文件
- 找到这个类样式，直接不要这两行代码即可（删掉还是注释掉都行）
- 处理完上面的步骤后，就只是显示正常了一些些，但是滚动选择的话，还是有问题
- 然后找到 mui.picker.js (或者其他压缩过后的mui.picker.min.js）文件
- 针对ios16.2以上的版本做特殊处理，当然，因为mui现在没人维护了，接下来的方法也是治标不治本，先用着吧
- mui.os.ios&&mui.os.version>="16.2"&&(e.list.style.webkitTransformOrigin="center center")}
- 简单说就是加上这行代码，就可以解决滚动异常的问题了，加在下图这个位置哈
- 代码就是针对ios版本大于16.2的重新设置了这个旋转的中心点
总结
最后的最后，附上我的代码（压缩过后的），看不懂的就自己想办法了哈
mui.picker.min.css
1 /** 2 * 选择列表插件 3 * varstion 2.0.0 4 * by Houfeng 5 * [email protected] 6 **/ 7 .mui-pciker-list li, .mui-picker, .mui-picker-inner {box-sizing: border-box;overflow: hidden }.mui-picker {background-color: #fff;position: relative;height: 200px;border: 1px solid rgba(0, 0, 0, .1);-webkit-user-select: none;user-select: none }.mui-dtpicker, .mui-poppicker {left: 0;background-color: #fff;-webkit-transition: .3s;width: 100% }.mui-picker-inner {position: relative;width: 100%;height: 100%;}.mui-pciker-list, .mui-pciker-rule {box-sizing: border-box;padding: 0;margin: -18px 0 0;width: 100%;height: 36px;line-height: 36px;position: absolute;left: 0;top: 50% }.mui-pciker-rule-bg {z-index: 0 }.mui-pciker-rule-ft {z-index: 2;border-top: solid 1px rgba(0, 0, 0, .1);border-bottom: solid 1px rgba(0, 0, 0, .1) }.mui-pciker-list {z-index: 1;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform: perspective(750pt) rotateY(0) rotateX(0);transform: perspective(750pt) rotateY(0) rotateX(0) }.mui-pciker-list li {width: 100%;height: 100%;position: absolute;text-align: center;vertical-align: middle;-webkit-backface-visibility: hidden;backface-visibility: hidden;font-size: 1pc;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #474344;padding: 0 8px;white-space: nowrap;-webkit-text-overflow: ellipsis;text-overflow: ellipsis;cursor: default;visibility: hidden }.mui-pciker-list li.highlight, .mui-pciker-list li.visible {visibility: visible }.mui-pciker-list li.highlight {color: #016eff }.mui-poppicker {position: fixed;z-index: 999;bottom: 0;-webkit-transform: translateY(300px) }.mui-poppicker.mui-active {-webkit-transform: translateY(0) }.mui-android-5-1 .mui-poppicker {bottom: -300px;-webkit-transition-property: bottom;-webkit-transform: none }.mui-android-5-1 .mui-poppicker.mui-active {bottom: 0;-webkit-transition-property: bottom;-webkit-transform: none }.mui-poppicker-header {padding: 6px;font-size: 14px;color: #888 }.mui-poppicker-header .mui-btn {font-size: 9pt;padding: 5px 10px }.mui-poppicker-btn-cancel {float: left }.mui-poppicker-btn-ok {float: right;border: 1px solid #016eff;background: #016eff;}.mui-poppicker-clear {clear: both;height: 0;line-height: 0;font-size: 0;overflow: hidden }.mui-poppicker-body {position: relative;width: 100%;height: 200px;border-top: solid 1px #ebebeb }.mui-poppicker-body .mui-picker {width: 100%;height: 100%;margin: 0;border: none;float: left }.mui-dtpicker {position: fixed;z-index: 999999;bottom: 0;-webkit-transform: translateY(300px) }.mui-dtpicker.mui-active {-webkit-transform: translateY(0) }.mui-dtpicker-active-for-page {overflow: hidden !important }.mui-android-5-1 .mui-dtpicker {bottom: -300px;-webkit-transition-property: bottom;-webkit-transform: none }.mui-android-5-1 .mui-dtpicker.mui-active {bottom: 0;-webkit-transition-property: bottom;-webkit-transform: none }.mui-dtpicker-header {padding: 6px;font-size: 14px;color: #888 }.mui-dtpicker-header button {font-size: 9pt;padding: 5px 10px }.mui-dtpicker-header button:last-child {float: right }.mui-dtpicker-body {position: relative;width: 100%;height: 200px }.mui-ios .mui-dtpicker-body {-webkit-perspective: 75pc;perspective: 75pc;-webkit-transform-style: preserve-3d;transform-style: preserve-3d }.mui-dtpicker-title h5 {display: inline-block;width: 20%;margin: 0;padding: 8px;text-align: center;border-top: solid 1px #ebebeb;background-color: #f0f0f0;border-bottom: solid 1px #ebebeb }[data-type=hour] [data-id=title-i], [data-type=hour] [data-id=picker-i], [data-type=month] [data-id=title-i], [data-type=month] [data-id=picker-d], [data-type=month] [data-id=title-d], [data-type=month] [data-id=picker-h], [data-type=month] [data-id=title-h], [data-type=month] [data-id=picker-i], [data-type=time] [data-id=picker-y], [data-type=time] [data-id=picker-m], [data-type=time] [data-id=picker-d], [data-type=time] [data-id=title-y], [data-type=time] [data-id=title-m], [data-type=time] [data-id=title-d], [data-type=date] [data-id=title-i], [data-type=date] [data-id=picker-h], [data-type=date] [data-id=title-h], [data-type=date] [data-id=picker-i] {display: none }.mui-dtpicker .mui-picker {width: 20%;height: 100%;margin: 0;float: left;border: none }[data-type=hour] [data-id=picker-h], [data-type=hour] [data-id=title-h], [data-type=datetime] [data-id=picker-h], [data-type=datetime] [data-id=title-h] {border-left: dotted 1px #ccc }[data-type=datetime] .mui-picker, [data-type=time] .mui-dtpicker-title h5 {width: 20% }[data-type=date] .mui-dtpicker-title h5, [data-type=date] .mui-picker {width: 33.3% }[data-type=hour] .mui-dtpicker-title h5, [data-type=hour] .mui-picker {width: 25% }[data-type=month] .mui-dtpicker-title h5, [data-type=month] .mui-picker, [data-type=time] .mui-dtpicker-title h5, [data-type=time] .mui-picker {width: 50% }
mui.picker.min.js
1 /** 2 * 选择列表插件 3 * varstion 2.0.0 4 * by Houfeng 5 * [email protected] 6 **/ 7 !function(e,t,i,n){var a=e.rad2deg=function(e){return e/(Math.PI/180)},s=(e.deg2rad=function(e){return e*(Math.PI/180)},navigator.platform.toLowerCase()),r=navigator.userAgent.toLowerCase(),c=(r.indexOf("iphone")>-1||r.indexOf("ipad")>-1||r.indexOf("ipod")>-1)&&(s.indexOf("iphone")>-1||s.indexOf("ipad")>-1||s.indexOf("ipod")>-1),l=e.Picker=function(e,t){var i=this;i.holder=e,i.options=t||{},i.init(),i.initInertiaParams(),i.calcElementItemPostion(!0),i.bindEvent()};l.prototype.findElementItems=function(){var e=this;return e.elementItems=[].slice.call(e.holder.querySelectorAll("li")),e.elementItems},l.prototype.init=function(){var e=this;e.list=e.holder.querySelector("ul"),e.findElementItems(),e.height=e.holder.offsetHeight,e.r=e.height/2-10,e.d=2*e.r,e.itemHeight=e.elementItems.length>0?e.elementItems[0].offsetHeight:40,e.itemAngle=parseInt(e.calcAngle(.8*e.itemHeight)),e.hightlightRange=e.itemAngle/2,e.visibleRange=90,e.beginAngle=0,e.beginExceed=e.beginAngle-30,e.list.angle=e.beginAngle,c&&(e.list.style.webkitTransformOrigin="center center "+e.r+"px"),mui.os.ios&&mui.os.version>="16.2"&&(e.list.style.webkitTransformOrigin="center center")},l.prototype.calcElementItemPostion=function(e){var t=this;e&&(t.items=[]),t.elementItems.forEach(function(i){var n=t.elementItems.indexOf(i);if(t.endAngle=t.itemAngle*n,i.angle=t.endAngle,i.style.webkitTransformOrigin="center center -"+t.r+"px",i.style.webkitTransform="translateZ("+t.r+"px) rotateX("+-t.endAngle+"deg)",e){var a={};a.text=i.innerHTML||"",a.value=i.getAttribute("data-value")||a.text,t.items.push(a)}}),t.endExceed=t.endAngle+30,t.calcElementItemVisibility(t.beginAngle)},l.prototype.calcAngle=function(e){var t=this,i=b=parseFloat(t.r);e=Math.abs(e);var n=180*parseInt(e/t.d);e%=t.d;var s=(i*i+b*b-e*e)/(2*i*b);return n+a(Math.acos(s))},l.prototype.calcElementItemVisibility=function(e){var t=this;t.elementItems.forEach(function(i){var n=Math.abs(i.angle-e);n<t.hightlightRange?i.classList.add("highlight"):n<t.visibleRange?(i.classList.add("visible"),i.classList.remove("highlight")):(i.classList.remove("highlight"),i.classList.remove("visible"))})},l.prototype.setAngle=function(e){var t=this;t.list.angle=e,t.list.style.webkitTransform="perspective(1000px) rotateY(0deg) rotateX("+e+"deg)",t.calcElementItemVisibility(e)},l.prototype.bindEvent=function(){var t=this,i=0,n=null,a=!1;t.holder.addEventListener(e.EVENT_START,function(e){a=!0,e.preventDefault(),t.list.style.webkitTransition="",n=(e.changedTouches?e.changedTouches[0]:e).pageY,i=t.list.angle,t.updateInertiaParams(e,!0)},!1),t.holder.addEventListener(e.EVENT_END,function(e){a=!1,e.preventDefault(),t.startInertiaScroll(e)},!1),t.holder.addEventListener(e.EVENT_CANCEL,function(e){a=!1,e.preventDefault(),t.startInertiaScroll(e)},!1),t.holder.addEventListener(e.EVENT_MOVE,function(e){if(a){e.preventDefault();var s=(e.changedTouches?e.changedTouches[0]:e).pageY-n,r=t.calcAngle(s),c=s>0?i-r:i+r;c>t.endExceed&&(c=t.endExceed),c<t.beginExceed&&(c=t.beginExceed),t.setAngle(c),t.updateInertiaParams(e)}},!1),t.list.addEventListener("tap",function(e){elementItem=e.target,"LI"==elementItem.tagName&&t.setSelectedIndex(t.elementItems.indexOf(elementItem),200)},!1)},l.prototype.initInertiaParams=function(){var e=this;e.lastMoveTime=0,e.lastMoveStart=0,e.stopInertiaMove=!1},l.prototype.updateInertiaParams=function(e,t){var i=this,n=e.changedTouches?e.changedTouches[0]:e;if(t)i.lastMoveStart=n.pageY,i.lastMoveTime=e.timeStamp||Date.now(),i.startAngle=i.list.angle;else{var a=e.timeStamp||Date.now();a-i.lastMoveTime>300&&(i.lastMoveTime=a,i.lastMoveStart=n.pageY)}i.stopInertiaMove=!0},l.prototype.startInertiaScroll=function(e){var t=this,i=e.changedTouches?e.changedTouches[0]:e,n=e.timeStamp||Date.now(),a=(i.pageY-t.lastMoveStart)/(n-t.lastMoveTime),s=a>0?-1:1,r=6e-4*s*-1,c=Math.abs(a/r),l=a*c/2,o=t.list.angle,u=t.calcAngle(l)*s,d=u;return o+u<t.beginExceed&&(c=c*((u=t.beginExceed-o)/d)*.6),o+u>t.endExceed&&(c=c*((u=t.endExceed-o)/d)*.6),0==u?void t.endScroll():void t.scrollDistAngle(n,o,u,c)},l.prototype.scrollDistAngle=function(e,t,i,n){var a=this;a.stopInertiaMove=!1,function(e,t,i,n){var s=n/13,r=0;!function e(){if(!a.stopInertiaMove){var n=a.quartEaseOut(r,t,i,s);return a.setAngle(n),++r>s-1||n<a.beginExceed||n>a.endExceed?void a.endScroll():void setTimeout(e,13)}}()}(0,t,i,n)},l.prototype.quartEaseOut=function(e,t,i,n){return-i*((e=e/n-1)*e*e*e-1)+t},l.prototype.endScroll=function(){var e=this;if(e.list.angle<e.beginAngle)e.list.style.webkitTransition="150ms ease-out",e.setAngle(e.beginAngle);else if(e.list.angle>e.endAngle)e.list.style.webkitTransition="150ms ease-out",e.setAngle(e.endAngle);else{var t=parseInt((e.list.angle/e.itemAngle).toFixed(0));e.list.style.webkitTransition="100ms ease-out",e.setAngle(e.itemAngle*t)}e.triggerChange()},l.prototype.triggerChange=function(t){var i=this;setTimeout(function(){var n=i.getSelectedIndex(),a=i.items[n];!e.trigger||n==i.lastIndex&&!0!==t||e.trigger(i.holder,"change",{index:n,item:a}),i.lastIndex=n,"function"==typeof t&&t()},0)},l.prototype.correctAngle=function(e){var t=this;return e<t.beginAngle?t.beginAngle:e>t.endAngle?t.endAngle:e},l.prototype.setItems=function(e){var t=this;t.items=e||[];var i=[];t.items.forEach(function(e){null!=e&&i.push("<li>"+(e.text||e)+"</li>")}),t.list.innerHTML=i.join(""),t.findElementItems(),t.calcElementItemPostion(),t.setAngle(t.correctAngle(t.list.angle)),t.triggerChange(!0)},l.prototype.getItems=function(){return this.items},l.prototype.getSelectedIndex=function(){return parseInt((this.list.angle/this.itemAngle).toFixed(0))},l.prototype.setSelectedIndex=function(e,t,i){var n=this;n.list.style.webkitTransition="";var a=n.correctAngle(n.itemAngle*e);if(t&&t>0){var s=a-n.list.angle;n.scrollDistAngle(Date.now(),n.list.angle,s,t)}else n.setAngle(a);n.triggerChange(i)},l.prototype.getSelectedItem=function(){return this.items[this.getSelectedIndex()]},l.prototype.getSelectedValue=function(){return(this.items[this.getSelectedIndex()]||{}).value},l.prototype.getSelectedText=function(){return(this.items[this.getSelectedIndex()]||{}).text},l.prototype.setSelectedValue=function(e,t,i){var n=this;for(var a in n.items){if(n.items[a].value==e)return void n.setSelectedIndex(a,t,i)}},e.fn&&(e.fn.picker=function(e){return this.each(function(t,i){if(!i.picker)if(e)i.picker=new l(i,e);else{var n=i.getAttribute("data-picker-options"),a=n?JSON.parse(n):{};i.picker=new l(i,a)}}),this[0]?this[0].picker:null},e.ready(function(){e(".mui-picker").picker()}))}(window.mui||window,window,document),function(e,t){e.dom=function(i){return"string"!=typeof i?i instanceof Array||i[0]&&i.length?[].slice.call(i):[i]:(e.__create_dom_div__||(e.__create_dom_div__=t.createElement("div")),e.__create_dom_div__.innerHTML=i,[].slice.call(e.__create_dom_div__.childNodes))};e.PopPicker=e.Class.extend({init:function(i){var n=this;n.options=i||{},n.options.buttons=n.options.buttons||["取消","确定"],n.panel=e.dom('<div class="mui-poppicker">\t\t<div class="mui-poppicker-header">\t\t\t<button class="mui-btn mui-poppicker-btn-cancel">取消</button>\t\t\t<button class="mui-btn mui-btn-blue mui-poppicker-btn-ok">确定</button>\t\t\t<div class="mui-poppicker-clear"></div>\t\t</div>\t\t<div class="mui-poppicker-body">\t\t</div>\t</div>')[0],t.body.appendChild(n.panel),n.ok=n.panel.querySelector(".mui-poppicker-btn-ok"),n.cancel=n.panel.querySelector(".mui-poppicker-btn-cancel"),n.body=n.panel.querySelector(".mui-poppicker-body"),n.mask=e.createMask(),n.cancel.innerText=n.options.buttons[0],n.ok.innerText=n.options.buttons[1],n.cancel.addEventListener("tap",function(e){n.hide()},!1),n.ok.addEventListener("tap",function(e){n.callback&&(!1!==n.callback(n.getSelectedItems())&&n.hide())},!1),n.mask[0].addEventListener("tap",function(){n.hide()},!1),n._createPicker(),n.panel.addEventListener(e.EVENT_START,function(e){e.preventDefault()},!1),n.panel.addEventListener(e.EVENT_MOVE,function(e){e.preventDefault()},!1)},_createPicker:function(){var t=this,i=t.options.layer||1,n=100/i+"%";t.pickers=[];for(var a=1;i>=a;a++){var s=e.dom('<div class="mui-picker">\t\t<div class="mui-picker-inner">\t\t\t<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\t\t\t<ul class="mui-pciker-list">\t\t\t</ul>\t\t\t<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\t\t</div>\t</div>')[0];s.style.width=n,t.body.appendChild(s);var r=e(s).picker();t.pickers.push(r),s.addEventListener("change",function(e){var t=this.nextSibling;if(t&&t.picker){var i=(e.detail||{}).item||{};t.picker.setItems(i.children)}},!1)}},setData:function(e){e=e||[],this.pickers[0].setItems(e)},getSelectedItems:function(){var e=[];for(var t in this.pickers){var i=this.pickers[t];e.push(i.getSelectedItem()||{})}return e},show:function(i){var n=this;n.callback=i,n.mask.show(),t.body.classList.add(e.className("poppicker-active-for-page")),n.panel.classList.add(e.className("active")),n.__back=e.back,e.back=function(){n.hide()}},hide:function(){var i=this;i.disposed||(i.panel.classList.remove(e.className("active")),i.mask.close(),t.body.classList.remove(e.className("poppicker-active-for-page")),e.back=i.__back)},dispose:function(){var e=this;e.hide(),setTimeout(function(){for(var t in e.panel.parentNode.removeChild(e.panel),e)e[t]=null,delete e[t];e.disposed=!0},300)}})}(mui,document),function(e,t){e.dom=function(i){return"string"!=typeof i?i instanceof Array||i[0]&&i.length?[].slice.call(i):[i]:(e.__create_dom_div__||(e.__create_dom_div__=t.createElement("div")),e.__create_dom_div__.innerHTML=i,[].slice.call(e.__create_dom_div__.childNodes))};e.DtPicker=e.Class.extend({init:function(i){var n=this,a=e.dom('<div class="mui-dtpicker" data-type="datetime">\t\t<div class="mui-dtpicker-header">\t\t\t<button data-id="btn-cancel" class="mui-btn">取消</button>\t\t\t<button data-id="btn-ok" class="mui-btn mui-btn-blue">确定</button>\t\t</div>\t\t<div class="mui-dtpicker-title"><h5 data-id="title-y">年</h5><h5 data-id="title-m">月</h5><h5 data-id="title-d">日</h5><h5 data-id="title-h">时</h5><h5 data-id="title-i">分</h5></div>\t\t<div class="mui-dtpicker-body">\t\t\t<div data-id="picker-y" class="mui-picker">\t\t\t\t<div class="mui-picker-inner">\t\t\t\t\t<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\t\t\t\t\t<ul class="mui-pciker-list">\t\t\t\t\t</ul>\t\t\t\t\t<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\t\t\t\t</div>\t\t\t</div>\t\t\t<div data-id="picker-m" class="mui-picker">\t\t\t\t<div class="mui-picker-inner">\t\t\t\t\t<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\t\t\t\t\t<ul class="mui-pciker-list">\t\t\t\t\t</ul>\t\t\t\t\t<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\t\t\t\t</div>\t\t\t</div>\t\t\t<div data-id="picker-d" class="mui-picker">\t\t\t\t<div class="mui-picker-inner">\t\t\t\t\t<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\t\t\t\t\t<ul class="mui-pciker-list">\t\t\t\t\t</ul>\t\t\t\t\t<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\t\t\t\t</div>\t\t\t</div>\t\t\t<div data-id="picker-h" class="mui-picker">\t\t\t\t<div class="mui-picker-inner">\t\t\t\t\t<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\t\t\t\t\t<ul class="mui-pciker-list">\t\t\t\t\t</ul>\t\t\t\t\t<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\t\t\t\t</div>\t\t\t</div>\t\t\t<div data-id="picker-i" class="mui-picker">\t\t\t\t<div class="mui-picker-inner">\t\t\t\t\t<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\t\t\t\t\t<ul class="mui-pciker-list">\t\t\t\t\t</ul>\t\t\t\t\t<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\t\t\t\t</div>\t\t\t</div>\t\t</div>\t</div>')[0];t.body.appendChild(a),e('[data-id*="picker"]',a).picker();var s=n.ui={picker:a,mask:e.createMask(),ok:e('[data-id="btn-ok"]',a)[0],cancel:e('[data-id="btn-cancel"]',a)[0],y:e('[data-id="picker-y"]',a)[0],m:e('[data-id="picker-m"]',a)[0],d:e('[data-id="picker-d"]',a)[0],h:e('[data-id="picker-h"]',a)[0],i:e('[data-id="picker-i"]',a)[0],labels:e('[data-id*="title-"]',a)};s.cancel.addEventListener("tap",function(){n.hide()},!1),s.ok.addEventListener("tap",function(){!1!==n.callback(n.getSelected())&&n.hide()},!1),s.y.addEventListener("change",function(e){n.options.beginMonth||n.options.endMonth?n._createMonth():n._createDay()},!1),s.m.addEventListener("change",function(e){n._createDay()},!1),s.d.addEventListener("change",function(e){(n.options.beginMonth||n.options.endMonth)&&n._createHours()},!1),s.h.addEventListener("change",function(e){(n.options.beginMonth||n.options.endMonth)&&n._createMinutes()},!1),s.mask[0].addEventListener("tap",function(){n.hide()},!1),n._create(i),n.ui.picker.addEventListener(e.EVENT_START,function(e){e.preventDefault()},!1),n.ui.picker.addEventListener(e.EVENT_MOVE,function(e){e.preventDefault()},!1)},getSelected:function(){var e=this.ui,t=this.options.type,i={type:t,y:e.y.picker.getSelectedItem(),m:e.m.picker.getSelectedItem(),d:e.d.picker.getSelectedItem(),h:e.h.picker.getSelectedItem(),i:e.i.picker.getSelectedItem(),toString:function(){return this.value}};switch(t){case"datetime":i.value=i.y.value+"-"+i.m.value+"-"+i.d.value+" "+i.h.value+":"+i.i.value,i.text=i.y.text+"-"+i.m.text+"-"+i.d.text+" "+i.h.text+":"+i.i.text;break;case"date":i.value=i.y.value+"-"+i.m.value+"-"+i.d.value,i.text=i.y.text+"-"+i.m.text+"-"+i.d.text;break;case"time":i.value=i.h.value+":"+i.i.value,i.text=i.h.text+":"+i.i.text;break;case"month":i.value=i.y.value+"-"+i.m.value,i.text=i.y.text+"-"+i.m.text;break;case"year":i.value=i.y.value,i.text=i.y.text;break;case"hour":i.value=i.y.value+"-"+i.m.value+"-"+i.d.value+" "+i.h.value,i.text=i.y.text+"-"+i.m.text+"-"+i.d.text+" "+i.h.text}return i},setSelectedValue:function(e){var t=this.ui,i=this._parseValue(e);t.y.picker.setSelectedValue(i.y,0,function(){t.m.picker.setSelectedValue(i.m,0,function(){t.d.picker.setSelectedValue(i.d,0,function(){t.h.picker.setSelectedValue(i.h,0,function(){t.i.picker.setSelectedValue(i.i,0)})})})})},isLeapYear:function(e){return e%4==0&&e%100!=0||e%400==0},_inArray:function(e,t){for(var i in e){if(e[i]===t)return!0}return!1},getDayNum:function(e,t){var i=this;return i._inArray([1,3,5,7,8,10,12],t)?31:i._inArray([4,6,9,11],t)?30:i.isLeapYear(e)?29:28},_fill:function(e){return(e=e.toString()).length<2&&(e=0+e),e},_isBeginYear:function(){return this.options.beginYear===parseInt(this.ui.y.picker.getSelectedValue())},_isBeginMonth:function(){return this.options.beginMonth&&this._isBeginYear()&&this.options.beginMonth===parseInt(this.ui.m.picker.getSelectedValue())},_isBeginDay:function(){return this._isBeginMonth()&&this.options.beginDay===parseInt(this.ui.d.picker.getSelectedValue())},_isBeginHours:function(){return this._isBeginDay()&&this.options.beginHours===parseInt(this.ui.h.picker.getSelectedValue())},_isEndYear:function(){return this.options.endYear===parseInt(this.ui.y.picker.getSelectedValue())},_isEndMonth:function(){return this.options.endMonth&&this._isEndYear()&&this.options.endMonth===parseInt(this.ui.m.picker.getSelectedValue())},_isEndDay:function(){return this._isEndMonth()&&this.options.endDay===parseInt(this.ui.d.picker.getSelectedValue())},_isEndHours:function(){return this._isEndDay()&&this.options.endHours===parseInt(this.ui.h.picker.getSelectedValue())},_createYear:function(e){var t=this.options,i=this.ui,n=[];if(t.customData.y)n=t.customData.y;else for(var a=t.beginYear,s=t.endYear,r=a;s>=r;r++)n.push({text:r+"",value:r});i.y.picker.setItems(n)},_createMonth:function(e){var t=this,i=t.options,n=t.ui,a=[];if(i.customData.m)a=i.customData.m;else for(var s=i.beginMonth&&t._isBeginYear()?i.beginMonth:1,r=i.endMonth&&t._isEndYear()?i.endMonth:12;r>=s;s++){var c=t._fill(s);a.push({text:c,value:c})}n.m.picker.setItems(a)},_createDay:function(e){var t=this,i=t.options,n=t.ui,a=[];if(i.customData.d)a=i.customData.d;else for(var s=t._isBeginMonth()?i.beginDay:1,r=t._isEndMonth()?i.endDay:t.getDayNum(parseInt(this.ui.y.picker.getSelectedValue()),parseInt(this.ui.m.picker.getSelectedValue()));r>=s;s++){var c=t._fill(s);a.push({text:c,value:c})}n.d.picker.setItems(a),e=e||n.d.picker.getSelectedValue()},_createHours:function(e){var t=this,i=t.options,n=t.ui,a=[];if(i.customData.h)a=i.customData.h;else for(var s=t._isBeginDay()?i.beginHours:0,r=t._isEndDay()?i.endHours:23;r>=s;s++){var c=t._fill(s);a.push({text:c,value:c})}n.h.picker.setItems(a)},_createMinutes:function(e){var t=this,i=t.options,n=t.ui,a=[];if(i.customData.i)a=i.customData.i;else for(var s=t._isBeginHours()?i.beginMinutes:0,r=t._isEndHours()?i.endMinutes:59;r>=s;s++){var c=t._fill(s);a.push({text:c,value:c})}n.i.picker.setItems(a)},_setLabels:function(){var e=this.options;this.ui.labels.each(function(t,i){i.innerText=e.labels[t]})},_setButtons:function(){var e=this.options,t=this.ui;t.cancel.innerText=e.buttons[0],t.ok.innerText=e.buttons[1]},_parseValue:function(e){var t={};if(e){var i=e.replace(":","-").replace(" ","-").split("-");t.y=i[0],t.m=i[1],t.d=i[2],t.h=i[3],t.i=i[4]}else{var n=new Date;t.y=n.getFullYear(),t.m=n.getMonth()+1,t.d=n.getDate(),t.h=n.getHours(),t.i=n.getMinutes()}return t},_create:function(e){var t=this;(e=e||{}).labels=e.labels||["年","月","日","时","分"],e.buttons=e.buttons||["取消","确定"],e.type=e.type||"datetime",e.customData=e.customData||{},t.options=e;var i=new Date,n=e.beginDate;n instanceof Date&&!isNaN(n.valueOf())&&(e.beginYear=n.getFullYear(),e.beginMonth=n.getMonth()+1,e.beginDay=n.getDate(),e.beginHours=n.getHours(),e.beginMinutes=n.getMinutes());var a=e.endDate;a instanceof Date&&!isNaN(a.valueOf())&&(e.endYear=a.getFullYear(),e.endMonth=a.getMonth()+1,e.endDay=a.getDate(),e.endHours=a.getHours(),e.endMinutes=a.getMinutes()),e.beginYear=e.beginYear||i.getFullYear()-5,e.endYear=e.endYear||i.getFullYear()+5;var s=t.ui;t._setLabels(),t._setButtons(),s.picker.setAttribute("data-type",e.type),t._createYear(),t._createMonth(),t._createDay(),t._createHours(),t._createMinutes(),t.setSelectedValue(e.value)},show:function(i){var n=this,a=n.ui;n.callback=i||e.noop,a.mask.show(),t.body.classList.add(e.className("dtpicker-active-for-page")),a.picker.classList.add(e.className("active")),n.__back=e.back,e.back=function(){n.hide()}},hide:function(){var i=this;if(!i.disposed){var n=i.ui;n.picker.classList.remove(e.className("active")),n.mask.close(),t.body.classList.remove(e.className("dtpicker-active-for-page")),e.back=i.__back}},dispose:function(){var e=this;e.hide(),setTimeout(function(){for(var t in e.ui.picker.parentNode.removeChild(e.ui.picker),e)e[t]=null,delete e[t];e.disposed=!0},300)}})}(mui,document);
标签：picker,function,data,ios16.2,type,var,mui,选择器 From： https://www.cnblogs.com/lgx5/p/18401606