mobileSelect.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716
  1. /*!
  2. * mobileSelect.js
  3. * (c) 2017-present onlyhom
  4. * Released under the MIT License.
  5. */
  6. (function() {
  7. function getClass(dom,string) {
  8. return dom.getElementsByClassName(string);
  9. }
  10. //构造器
  11. function MobileSelect(config) {
  12. this.mobileSelect;
  13. this.wheelsData = config.wheels;
  14. this.jsonType = false;
  15. this.cascadeJsonData = [];
  16. this.displayJson = [];
  17. this.curValue = null;
  18. this.curIndexArr = [];
  19. this.cascade = false;
  20. this.startY;
  21. this.moveEndY;
  22. this.moveY;
  23. this.oldMoveY;
  24. this.offset = 0;
  25. this.offsetSum = 0;
  26. this.oversizeBorder;
  27. this.curDistance = [];
  28. this.clickStatus = false;
  29. this.isPC = true;
  30. this.init(config);
  31. }
  32. MobileSelect.prototype = {
  33. constructor: MobileSelect,
  34. init: function(config){
  35. var _this = this;
  36. _this.keyMap = config.keyMap ? config.keyMap : {id:'id', value:'value', childs:'childs'};
  37. _this.checkDataType();
  38. _this.renderWheels(_this.wheelsData, config.cancelBtnText, config.ensureBtnText);
  39. _this.trigger = document.querySelector(config.trigger);
  40. if(!_this.trigger){
  41. console.error('mobileSelect has been successfully installed, but no trigger found on your page.');
  42. return false;
  43. }
  44. _this.wheel = getClass(_this.mobileSelect,'wheel');
  45. _this.slider = getClass(_this.mobileSelect,'selectContainer');
  46. _this.wheels = _this.mobileSelect.querySelector('.wheels');
  47. _this.liHeight = _this.mobileSelect.querySelector('li').offsetHeight;
  48. _this.ensureBtn = _this.mobileSelect.querySelector('.ensure');
  49. _this.cancelBtn = _this.mobileSelect.querySelector('.cancel');
  50. _this.grayLayer = _this.mobileSelect.querySelector('.grayLayer');
  51. _this.popUp = _this.mobileSelect.querySelector('.content');
  52. _this.callback = config.callback || function(){};
  53. _this.transitionEnd = config.transitionEnd || function(){};
  54. _this.onShow = config.onShow || function(){};
  55. _this.onHide = config.onHide || function(){};
  56. _this.initPosition = config.position || [];
  57. _this.titleText = config.title || '';
  58. _this.connector = config.connector || ' ';
  59. _this.triggerDisplayData = !(typeof(config.triggerDisplayData)=='undefined') ? config.triggerDisplayData : true;
  60. _this.trigger.style.cursor='pointer';
  61. _this.setStyle(config);
  62. _this.setTitle(_this.titleText);
  63. _this.checkIsPC();
  64. _this.checkCascade();
  65. _this.addListenerAll();
  66. if (_this.cascade) {
  67. _this.initCascade();
  68. }
  69. //定位 初始位置
  70. if(_this.initPosition.length < _this.slider.length){
  71. var diff = _this.slider.length - _this.initPosition.length;
  72. for(var i=0; i<diff; i++){
  73. _this.initPosition.push(0);
  74. }
  75. }
  76. _this.setCurDistance(_this.initPosition);
  77. //按钮监听
  78. _this.cancelBtn.addEventListener('click',function(){
  79. _this.hide();
  80. });
  81. _this.ensureBtn.addEventListener('click',function(){
  82. _this.hide();
  83. if(!_this.liHeight) {
  84. _this.liHeight = _this.mobileSelect.querySelector('li').offsetHeight;
  85. }
  86. var tempValue ='';
  87. for(var i=0; i<_this.wheel.length; i++){
  88. i==_this.wheel.length-1 ? tempValue += _this.getInnerHtml(i) : tempValue += _this.getInnerHtml(i) + _this.connector;
  89. }
  90. if(_this.triggerDisplayData){
  91. _this.trigger.innerHTML = tempValue;
  92. }
  93. _this.curIndexArr = _this.getIndexArr();
  94. _this.curValue = _this.getCurValue();
  95. _this.callback(_this.curIndexArr, _this.curValue);
  96. });
  97. _this.trigger.addEventListener('click',function(){
  98. _this.show();
  99. });
  100. _this.grayLayer.addEventListener('click',function(){
  101. _this.hide();
  102. });
  103. _this.popUp.addEventListener('click',function(){
  104. event.stopPropagation();
  105. });
  106. _this.fixRowStyle(); //修正列数
  107. },
  108. setTitle: function(string){
  109. var _this = this;
  110. _this.titleText = string;
  111. _this.mobileSelect.querySelector('.title').innerHTML = _this.titleText;
  112. },
  113. setStyle: function(config){
  114. var _this = this;
  115. if(config.ensureBtnColor){
  116. _this.ensureBtn.style.color = config.ensureBtnColor;
  117. }
  118. if(config.cancelBtnColor){
  119. _this.cancelBtn.style.color = config.cancelBtnColor;
  120. }
  121. if(config.titleColor){
  122. _this.title = _this.mobileSelect.querySelector('.title');
  123. _this.title.style.color = config.titleColor;
  124. }
  125. if(config.textColor){
  126. _this.panel = _this.mobileSelect.querySelector('.panel');
  127. _this.panel.style.color = config.textColor;
  128. }
  129. if(config.titleBgColor){
  130. _this.btnBar = _this.mobileSelect.querySelector('.btnBar');
  131. _this.btnBar.style.backgroundColor = config.titleBgColor;
  132. }
  133. if(config.bgColor){
  134. _this.panel = _this.mobileSelect.querySelector('.panel');
  135. _this.shadowMask = _this.mobileSelect.querySelector('.shadowMask');
  136. _this.panel.style.backgroundColor = config.bgColor;
  137. _this.shadowMask.style.background = 'linear-gradient(to bottom, '+ config.bgColor + ', rgba(255, 255, 255, 0), '+ config.bgColor + ')';
  138. }
  139. if(!isNaN(config.maskOpacity)){
  140. _this.grayMask = _this.mobileSelect.querySelector('.grayLayer');
  141. _this.grayMask.style.background = 'rgba(0, 0, 0, '+ config.maskOpacity +')';
  142. }
  143. },
  144. checkIsPC: function(){
  145. var _this = this;
  146. var sUserAgent = navigator.userAgent.toLowerCase();
  147. var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
  148. var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
  149. var bIsMidp = sUserAgent.match(/midp/i) == "midp";
  150. var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
  151. var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
  152. var bIsAndroid = sUserAgent.match(/android/i) == "android";
  153. var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
  154. var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
  155. if ((bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
  156. _this.isPC = false;
  157. }
  158. },
  159. show: function(){
  160. this.mobileSelect.classList.add('mobileSelect-show');
  161. if (typeof this.onShow === 'function') {
  162. this.onShow(this);
  163. }
  164. },
  165. hide: function() {
  166. this.mobileSelect.classList.remove('mobileSelect-show');
  167. if (typeof this.onHide === 'function') {
  168. this.onHide(this);
  169. }
  170. },
  171. renderWheels: function(wheelsData, cancelBtnText, ensureBtnText){
  172. var _this = this;
  173. var cancelText = cancelBtnText ? cancelBtnText : '取消';
  174. var ensureText = ensureBtnText ? ensureBtnText : '确认';
  175. _this.mobileSelect = document.createElement("div");
  176. _this.mobileSelect.className = "mobileSelect";
  177. _this.mobileSelect.innerHTML =
  178. '<div class="grayLayer"></div>'+
  179. '<div class="content">'+
  180. '<div class="btnBar">'+
  181. '<div class="fixWidth">'+
  182. '<div class="cancel">'+ cancelText +'</div>'+
  183. '<div class="title"></div>'+
  184. '<div class="ensure">'+ ensureText +'</div>'+
  185. '</div>'+
  186. '</div>'+
  187. '<div class="panel">'+
  188. '<div class="fixWidth">'+
  189. '<div class="wheels">'+
  190. '</div>'+
  191. '<div class="selectLine"></div>'+
  192. '<div class="shadowMask"></div>'+
  193. '</div>'+
  194. '</div>'+
  195. '</div>';
  196. document.body.appendChild(_this.mobileSelect);
  197. //根据数据长度来渲染
  198. var tempHTML='';
  199. for(var i=0; i<wheelsData.length; i++){
  200. //列
  201. tempHTML += '<div class="wheel"><ul class="selectContainer">';
  202. if(_this.jsonType){
  203. for(var j=0; j<wheelsData[i].data.length; j++){
  204. //行
  205. tempHTML += '<li data-id="'+wheelsData[i].data[j][_this.keyMap.id]+'">'+wheelsData[i].data[j][_this.keyMap.value]+'</li>';
  206. }
  207. }else{
  208. for(var j=0; j<wheelsData[i].data.length; j++){
  209. //行
  210. tempHTML += '<li>'+wheelsData[i].data[j]+'</li>';
  211. }
  212. }
  213. tempHTML += '</ul></div>';
  214. }
  215. _this.mobileSelect.querySelector('.wheels').innerHTML = tempHTML;
  216. },
  217. addListenerAll: function(){
  218. var _this = this;
  219. for(var i=0; i<_this.slider.length; i++){
  220. //手势监听
  221. (function (i) {
  222. _this.addListenerWheel(_this.wheel[i], i);
  223. })(i);
  224. }
  225. },
  226. addListenerWheel: function(theWheel, index){
  227. var _this = this;
  228. theWheel.addEventListener('touchstart', function () {
  229. _this.touch(event, this.firstChild, index);
  230. },false);
  231. theWheel.addEventListener('touchend', function () {
  232. _this.touch(event, this.firstChild, index);
  233. },false);
  234. theWheel.addEventListener('touchmove', function () {
  235. _this.touch(event, this.firstChild, index);
  236. },false);
  237. if(_this.isPC){
  238. //如果是PC端则再增加拖拽监听 方便调试
  239. theWheel.addEventListener('mousedown', function () {
  240. _this.dragClick(event, this.firstChild, index);
  241. },false);
  242. theWheel.addEventListener('mousemove', function () {
  243. _this.dragClick(event, this.firstChild, index);
  244. },false);
  245. theWheel.addEventListener('mouseup', function () {
  246. _this.dragClick(event, this.firstChild, index);
  247. },true);
  248. }
  249. },
  250. checkDataType: function(){
  251. var _this = this;
  252. if(typeof(_this.wheelsData[0].data[0])=='object'){
  253. _this.jsonType = true;
  254. }
  255. },
  256. checkCascade: function(){
  257. var _this = this;
  258. if(_this.jsonType){
  259. var node = _this.wheelsData[0].data;
  260. for(var i=0; i<node.length; i++){
  261. if(_this.keyMap.childs in node[i] && node[i][_this.keyMap.childs].length > 0){
  262. _this.cascade = true;
  263. _this.cascadeJsonData = _this.wheelsData[0].data;
  264. break;
  265. }
  266. }
  267. }else{
  268. _this.cascade = false;
  269. }
  270. },
  271. generateArrData: function (targetArr) {
  272. var tempArr = [];
  273. var keyMap_id = this.keyMap.id;
  274. var keyMap_value = this.keyMap.value;
  275. for(var i=0; i<targetArr.length; i++){
  276. var tempObj = {};
  277. tempObj[keyMap_id] = targetArr[i][this.keyMap.id];
  278. tempObj[keyMap_value] = targetArr[i][this.keyMap.value];
  279. tempArr.push(tempObj);
  280. }
  281. return tempArr;
  282. },
  283. initCascade: function(){
  284. var _this = this;
  285. _this.displayJson.push(_this.generateArrData(_this.cascadeJsonData));
  286. if(_this.initPosition.length>0){
  287. _this.initDeepCount = 0;
  288. _this.initCheckArrDeep(_this.cascadeJsonData[_this.initPosition[0]]);
  289. }else{
  290. _this.checkArrDeep(_this.cascadeJsonData[0]);
  291. }
  292. _this.reRenderWheels();
  293. },
  294. initCheckArrDeep: function (parent) {
  295. var _this = this;
  296. if(parent){
  297. if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
  298. _this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs]));
  299. _this.initDeepCount++;
  300. var nextNode = parent[_this.keyMap.childs][_this.initPosition[_this.initDeepCount]];
  301. if(nextNode){
  302. _this.initCheckArrDeep(nextNode);
  303. }else{
  304. _this.checkArrDeep(parent[_this.keyMap.childs][0]);
  305. }
  306. }
  307. }
  308. },
  309. checkArrDeep: function (parent) {
  310. //检测子节点深度 修改 displayJson
  311. var _this = this;
  312. if(parent){
  313. if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
  314. _this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs])); //生成子节点数组
  315. _this.checkArrDeep(parent[_this.keyMap.childs][0]);//检测下一个子节点
  316. }
  317. }
  318. },
  319. checkRange: function(index, posIndexArr){
  320. var _this = this;
  321. var deleteNum = _this.displayJson.length-1-index;
  322. for(var i=0; i<deleteNum; i++){
  323. _this.displayJson.pop(); //修改 displayJson
  324. }
  325. var resultNode;
  326. for (var i = 0; i <= index; i++){
  327. if (i == 0)
  328. resultNode = _this.cascadeJsonData[posIndexArr[0]];
  329. else {
  330. resultNode = resultNode[_this.keyMap.childs][posIndexArr[i]];
  331. }
  332. }
  333. _this.checkArrDeep(resultNode);
  334. //console.log(_this.displayJson);
  335. _this.reRenderWheels();
  336. _this.fixRowStyle();
  337. _this.setCurDistance(_this.resetPosition(index, posIndexArr));
  338. },
  339. resetPosition: function(index, posIndexArr){
  340. var _this = this;
  341. var tempPosArr = posIndexArr;
  342. var tempCount;
  343. if(_this.slider.length > posIndexArr.length){
  344. tempCount = _this.slider.length - posIndexArr.length;
  345. for(var i=0; i<tempCount; i++){
  346. tempPosArr.push(0);
  347. }
  348. }else if(_this.slider.length < posIndexArr.length){
  349. tempCount = posIndexArr.length - _this.slider.length;
  350. for(var i=0; i<tempCount; i++){
  351. tempPosArr.pop();
  352. }
  353. }
  354. for(var i=index+1; i< tempPosArr.length; i++){
  355. tempPosArr[i] = 0;
  356. }
  357. return tempPosArr;
  358. },
  359. reRenderWheels: function(){
  360. var _this = this;
  361. //删除多余的wheel
  362. if(_this.wheel.length > _this.displayJson.length){
  363. var count = _this.wheel.length - _this.displayJson.length;
  364. for(var i=0; i<count; i++){
  365. _this.wheels.removeChild(_this.wheel[_this.wheel.length-1]);
  366. }
  367. }
  368. for(var i=0; i<_this.displayJson.length; i++){
  369. //列
  370. (function (i) {
  371. var tempHTML='';
  372. if(_this.wheel[i]){
  373. //console.log('插入Li');
  374. for(var j=0; j<_this.displayJson[i].length; j++){
  375. //行
  376. tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>';
  377. }
  378. _this.slider[i].innerHTML = tempHTML;
  379. }else{
  380. var tempWheel = document.createElement("div");
  381. tempWheel.className = "wheel";
  382. tempHTML = '<ul class="selectContainer">';
  383. for(var j=0; j<_this.displayJson[i].length; j++){
  384. //行
  385. tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>';
  386. }
  387. tempHTML += '</ul>';
  388. tempWheel.innerHTML = tempHTML;
  389. _this.addListenerWheel(tempWheel, i);
  390. _this.wheels.appendChild(tempWheel);
  391. }
  392. //_this.·(i);
  393. })(i);
  394. }
  395. },
  396. updateWheels:function(data){
  397. var _this = this;
  398. if(_this.cascade){
  399. _this.cascadeJsonData = data;
  400. _this.displayJson = [];
  401. _this.initCascade();
  402. if(_this.initPosition.length < _this.slider.length){
  403. var diff = _this.slider.length - _this.initPosition.length;
  404. for(var i=0; i<diff; i++){
  405. _this.initPosition.push(0);
  406. }
  407. }
  408. _this.setCurDistance(_this.initPosition);
  409. _this.fixRowStyle();
  410. }
  411. },
  412. updateWheel: function(sliderIndex, data){
  413. var _this = this;
  414. var tempHTML='';
  415. if(_this.cascade){
  416. console.error('级联格式不支持updateWheel(),请使用updateWheels()更新整个数据源');
  417. return false;
  418. }
  419. else if(_this.jsonType){
  420. for(var j=0; j<data.length; j++){
  421. tempHTML += '<li data-id="'+data[j][_this.keyMap.id]+'">'+data[j][_this.keyMap.value]+'</li>';
  422. }
  423. _this.wheelsData[sliderIndex] = {data: data};
  424. }else{
  425. for(var j=0; j<data.length; j++){
  426. tempHTML += '<li>'+data[j]+'</li>';
  427. }
  428. _this.wheelsData[sliderIndex] = data;
  429. }
  430. _this.slider[sliderIndex].innerHTML = tempHTML;
  431. },
  432. fixRowStyle: function(){
  433. var _this = this;
  434. var width = (100/_this.wheel.length).toFixed(2);
  435. for(var i=0; i<_this.wheel.length; i++){
  436. _this.wheel[i].style.width = width+'%';
  437. }
  438. },
  439. getIndex: function(distance){
  440. return Math.round((2*this.liHeight-distance)/this.liHeight);
  441. },
  442. getIndexArr: function(){
  443. var _this = this;
  444. var temp = [];
  445. for(var i=0; i<_this.curDistance.length; i++){
  446. temp.push(_this.getIndex(_this.curDistance[i]));
  447. }
  448. return temp;
  449. },
  450. getCurValue: function(){
  451. var _this = this;
  452. var temp = [];
  453. var positionArr = _this.getIndexArr();
  454. if(_this.cascade){
  455. for(var i=0; i<_this.wheel.length; i++){
  456. temp.push(_this.displayJson[i][positionArr[i]]);
  457. }
  458. }
  459. else if(_this.jsonType){
  460. for(var i=0; i<_this.curDistance.length; i++){
  461. temp.push(_this.wheelsData[i].data[_this.getIndex(_this.curDistance[i])]);
  462. }
  463. }else{
  464. for(var i=0; i<_this.curDistance.length; i++){
  465. temp.push(_this.getInnerHtml(i));
  466. }
  467. }
  468. return temp;
  469. },
  470. getValue: function(){
  471. return this.curValue;
  472. },
  473. calcDistance: function(index){
  474. return 2*this.liHeight-index*this.liHeight;
  475. },
  476. setCurDistance: function(indexArr){
  477. var _this = this;
  478. var temp = [];
  479. for(var i=0; i<_this.slider.length; i++){
  480. temp.push(_this.calcDistance(indexArr[i]));
  481. _this.movePosition(_this.slider[i],temp[i]);
  482. }
  483. _this.curDistance = temp;
  484. },
  485. fixPosition: function(distance){
  486. return -(this.getIndex(distance)-2)*this.liHeight;
  487. },
  488. movePosition: function(theSlider, distance){
  489. theSlider.style.webkitTransform = 'translate3d(0,' + distance + 'px, 0)';
  490. theSlider.style.transform = 'translate3d(0,' + distance + 'px, 0)';
  491. },
  492. locatePosition: function(index, posIndex){
  493. var _this = this;
  494. this.curDistance[index] = this.calcDistance(posIndex);
  495. this.movePosition(this.slider[index],this.curDistance[index]);
  496. if(_this.cascade){
  497. _this.checkRange(index, _this.getIndexArr());
  498. }
  499. },
  500. updateCurDistance: function(theSlider, index){
  501. if(theSlider.style.transform){
  502. this.curDistance[index] = parseInt(theSlider.style.transform.split(',')[1]);
  503. }else{
  504. this.curDistance[index] = parseInt(theSlider.style.webkitTransform.split(',')[1]);
  505. }
  506. },
  507. getDistance:function(theSlider){
  508. if(theSlider.style.transform){
  509. return parseInt(theSlider.style.transform.split(',')[1]);
  510. }else{
  511. return parseInt(theSlider.style.webkitTransform.split(',')[1]);
  512. }
  513. },
  514. getInnerHtml: function(sliderIndex){
  515. var _this = this;
  516. var index = _this.getIndex(_this.curDistance[sliderIndex]);
  517. return _this.slider[sliderIndex].getElementsByTagName('li')[index].innerHTML;
  518. },
  519. touch: function(event, theSlider, index){
  520. var _this = this;
  521. event = event || window.event;
  522. switch(event.type){
  523. case "touchstart":
  524. _this.startY = event.touches[0].clientY;
  525. _this.startY = parseInt(_this.startY);
  526. _this.oldMoveY = _this.startY;
  527. break;
  528. case "touchend":
  529. _this.moveEndY = parseInt(event.changedTouches[0].clientY);
  530. _this.offsetSum = _this.moveEndY - _this.startY;
  531. _this.oversizeBorder = -(theSlider.getElementsByTagName('li').length-3)*_this.liHeight;
  532. if(_this.offsetSum == 0){
  533. //offsetSum为0,相当于点击事件
  534. // 0 1 [2] 3 4
  535. var clickOffetNum = parseInt((document.documentElement.clientHeight - _this.moveEndY)/40);
  536. if(clickOffetNum!=2){
  537. var offset = clickOffetNum - 2;
  538. var newDistance = _this.curDistance[index] + (offset*_this.liHeight);
  539. if((newDistance <= 2*_this.liHeight) && (newDistance >= _this.oversizeBorder) ){
  540. _this.curDistance[index] = newDistance;
  541. _this.movePosition(theSlider, _this.curDistance[index]);
  542. _this.transitionEnd(_this.getIndexArr(),_this.getCurValue());
  543. }
  544. }
  545. }else{
  546. //修正位置
  547. _this.updateCurDistance(theSlider, index);
  548. _this.curDistance[index] = _this.fixPosition(_this.curDistance[index]);
  549. _this.movePosition(theSlider, _this.curDistance[index]);
  550. //反弹
  551. if(_this.curDistance[index] + _this.offsetSum > 2*_this.liHeight){
  552. _this.curDistance[index] = 2*_this.liHeight;
  553. setTimeout(function(){
  554. _this.movePosition(theSlider, _this.curDistance[index]);
  555. }, 100);
  556. }else if(_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder){
  557. _this.curDistance[index] = _this.oversizeBorder;
  558. setTimeout(function(){
  559. _this.movePosition(theSlider, _this.curDistance[index]);
  560. }, 100);
  561. }
  562. _this.transitionEnd(_this.getIndexArr(),_this.getCurValue());
  563. }
  564. if(_this.cascade){
  565. _this.checkRange(index, _this.getIndexArr());
  566. }
  567. break;
  568. case "touchmove":
  569. event.preventDefault();
  570. _this.moveY = event.touches[0].clientY;
  571. _this.offset = _this.moveY - _this.oldMoveY;
  572. _this.updateCurDistance(theSlider, index);
  573. _this.curDistance[index] = _this.curDistance[index] + _this.offset;
  574. _this.movePosition(theSlider, _this.curDistance[index]);
  575. _this.oldMoveY = _this.moveY;
  576. break;
  577. }
  578. },
  579. dragClick: function(event, theSlider, index){
  580. var _this = this;
  581. event = event || window.event;
  582. switch(event.type){
  583. case "mousedown":
  584. _this.startY = event.clientY;
  585. _this.oldMoveY = _this.startY;
  586. _this.clickStatus = true;
  587. break;
  588. case "mouseup":
  589. _this.moveEndY = event.clientY;
  590. _this.offsetSum = _this.moveEndY - _this.startY;
  591. _this.oversizeBorder = -(theSlider.getElementsByTagName('li').length-3)*_this.liHeight;
  592. if(_this.offsetSum == 0){
  593. var clickOffetNum = parseInt((document.documentElement.clientHeight - _this.moveEndY)/40);
  594. if(clickOffetNum!=2){
  595. var offset = clickOffetNum - 2;
  596. var newDistance = _this.curDistance[index] + (offset*_this.liHeight);
  597. if((newDistance <= 2*_this.liHeight) && (newDistance >= _this.oversizeBorder) ){
  598. _this.curDistance[index] = newDistance;
  599. _this.movePosition(theSlider, _this.curDistance[index]);
  600. _this.transitionEnd(_this.getIndexArr(),_this.getCurValue());
  601. }
  602. }
  603. }else{
  604. //修正位置
  605. _this.updateCurDistance(theSlider, index);
  606. _this.curDistance[index] = _this.fixPosition(_this.curDistance[index]);
  607. _this.movePosition(theSlider, _this.curDistance[index]);
  608. //反弹
  609. if(_this.curDistance[index] + _this.offsetSum > 2*_this.liHeight){
  610. _this.curDistance[index] = 2*_this.liHeight;
  611. setTimeout(function(){
  612. _this.movePosition(theSlider, _this.curDistance[index]);
  613. }, 100);
  614. }else if(_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder){
  615. _this.curDistance[index] = _this.oversizeBorder;
  616. setTimeout(function(){
  617. _this.movePosition(theSlider, _this.curDistance[index]);
  618. }, 100);
  619. }
  620. _this.transitionEnd(_this.getIndexArr(),_this.getCurValue());
  621. }
  622. _this.clickStatus = false;
  623. if(_this.cascade){
  624. _this.checkRange(index, _this.getIndexArr());
  625. }
  626. break;
  627. case "mousemove":
  628. event.preventDefault();
  629. if(_this.clickStatus){
  630. _this.moveY = event.clientY;
  631. _this.offset = _this.moveY - _this.oldMoveY;
  632. _this.updateCurDistance(theSlider, index);
  633. _this.curDistance[index] = _this.curDistance[index] + _this.offset;
  634. _this.movePosition(theSlider, _this.curDistance[index]);
  635. _this.oldMoveY = _this.moveY;
  636. }
  637. break;
  638. }
  639. }
  640. };
  641. if (typeof exports == "object") {
  642. module.exports = MobileSelect;
  643. } else if (typeof define == "function" && define.amd) {
  644. define([], function () {
  645. return MobileSelect;
  646. })
  647. } else {
  648. window.MobileSelect = MobileSelect;
  649. }
  650. })();