好久没写博客了,甚是想念,也不知道写个啥比较好,一直很无脑的忙公司的项目,不知不觉都快一年没写新博客了,真是惭愧,上次写公司项目的时候使用的mint-ui这个UI组件,使用的过程中出现了一个很奇怪的问题,在微信端打开的时候是正常的,但是在浏览器里打开的时候picker里就不显示数据了,没法选择,不过只是部分的手机,比如iphone7,后来排错的时候发现mint-ui的官网,发现官网发布的例子在这个手机上呈现了一样的问题,于是才孕育了这个组件。经过测试,在各个浏览器上都是能正常显示和筛选的,没有参考别人的算法,自己写了一套算法,大佬们看后可以不吝赐教提出更好的算法或者改进的地方。
话不多说,开始讲代码吧,主题代码大概是这样的。
<template> <div class="picker wheel-scroll"> <div class="bg"></div> <div class="piciker-cont"> <div class="btns"> <div class="cancel" @click="cancelClick">{{cancelBtnText}}</div> <div class="sure" @click="sureClick">{{sureBtnText}}</div> </div> <div class="picker-contain"> <div v-for="(k,i) in dateData" :key="i" v-show="i === 0 ? hasYear : (i === 1 ? hasMonth : (i === 2) ? hasDate : false)" class="wheel-cont wheel-scroll" ref="picker"> <ul class="wheel-item items"> <li v-for="(key,index) in k" :key="index" class="item">{{key}}</li> </ul> </div> </div> </div> </div> </template> <script> import BScroll from 'better-scroll'; export default { data () { return { canClick: true, dateData: [], i: 0, pickerDom: [], hierarchy: [] } }, props: { sureBtnText: { type: String, default: 'sure' }, cancelBtnText: { type: String, default: 'cancel' }, defaultDate: { type: String, default: () => { const dd = new Date(); return sd.getFullYear() + '/' + (sd.getMonth() + 1) + '/' + sd.getDate() } }, startDate: { type: String, default: () => { const sd = new Date(); return (sd.getFullYear() - 5) + '/' + (sd.getMonth() + 1) + '/' + sd.getDate() } }, endDate: { type: String, default: () => { const ed = new Date(); return (ed.getFullYear() + 5) + '/' + (ed.getMonth() + 1) + '/' + ed.getDate() } }, hasYear: { type: Boolean, default: true }, hasDate: { type: Boolean, default: true }, hasMonth: { type: Boolean, default: true }, type: { type: String, default: 'date' } }, mounted () { this.init(); }, methods: { init () { this.checkParam(); setTimeout(() => { this.pickerDom = this.$refs.picker; const sum = this.pickerDom.length; for (let m = 0; m < sum; m++) { this['datePicker' + m] = new BScroll(this.pickerDom[m], { wheel: { selectedIndex: this.hierarchy[m] || 0, rotate: 33, adjustTime: 50, wheelWrapperClass: 'wheel-scroll', wheelItemClass: 'wheel-item' } }); this['datePicker' + m].on('scrollStart', (pos) => { this.canClick = false; }) this['datePicker' + m].on('scrollEnd', (pos) => { this.updateData(pos, m); }); } }, 20) }, checkParam () { const d = new Date(); if (new Date(this.startDate) === 'Invalid Date') { this.startDate = (d.getFullYear() -5) + '/' + (d.getMonth() + 1) + '/' + d.getDate(); } if (new Date(this.endDate) === 'Invalid Date') { this.endDate = (d.getFullYear() + 5) + '/' + (d.getMonth() + 1) + '/' + d.getDate(); } if (new Date(this.defaultDate) === 'Invalid Date') { this.defaultDate = d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate(); } if (this.defaultDate > this.endDate) this.defaultDate = this.endDate; if(this.defaultDate < this.startDate) this.defaultDate = this.startDate; const ss = this.startDate.split('/'); const es = this.endDate.split('/'); const ds = this.defaultDate.split('/'); this.dateData.push(this.setData(ss[0] - 0,es[0] - 0)); this.hierarchy.push(ds[0] - ss[0]); let temp = 0; if (ds[1]-0 < 11) { temp = new Date(new Date(ds[0] + '/' + (ds[1]-0+1) + '/01').getTime() - 24 * 60 * 60 * 1000).getDate(); } else { temp = 31; } if (ds[0] > ss[0] && ds[0] < es[0]) { this.hierarchy.push(ds[1] - 1); this.hierarchy.push(ds[2] - 1); this.dateData.push([1,2,3,4,5,6,7,8,9,10,11,12]); this.dateData.push(this.setData(1, temp)) } else if (ds[0] === ss[0]) { this.hierarchy.push(ds[1] - ss[1]); this.dateData.push(this.setData(ss[1] - 0, 12)) if (ds[1] === ss[1]) { this.hierarchy.push(ds[2] - ss[2]); this.dateData.push(this.setData(ss[2] - 0, temp)) } else { this.hierarchy.push(ds[2] - 1); this.dateData.push(this.setData(1, temp)) } } else if (ds[0] === es[0]) { this.hierarchy.push(ds[1] - 1); this.dateData.push(this.setData(1, es[1])) if (ds[1] === es[1]) { this.hierarchy.push(ds[2] - 1); this.dateData.push(this.setData(1, es[2] - 0)) } else { this.hierarchy.push(ds[2] - 1); this.dateData.push(this.setData(1, temp)) } } }, setData (start, end) { let d = []; for (let i = start; i < end + 1; i++) { d.push(i); } return d; }, sureClick() { if (!this.canClick) return; let texts = []; for (let m = 0; m < this.hierarchy.length; m++) { texts.push(this.dateData[m][this.hierarchy[m]]); } if (!!!texts[texts.length]) { texts[texts.length -1] = this.dateData[this.dateData.length -1][this.dateData[this.dateData.length -1].length -1] } this.$emit('sureClick', this.hierarchy, texts); }, cancelClick() { this.$emit('cancelClick'); }, updateData (pos, m) { const ss = this.startDate.split('/'); const es = this.endDate.split('/'); let delayer = 0; this.hierarchy[m] = Math.abs(pos.y/30); if (m === 0 || m === 1) { if (m === 0) { delayer += 20; if (pos.y - 0 === 0) { this.$set(this.dateData, 1, this.setData(ss[1] - 0, 12)); } else if (Math.abs(pos.y/30) === es[0]-ss[0]) { this.$set(this.dateData, 1, this.setData(1, es[1] - 0)); } else { this.$set(this.dateData, 1, this.setData(1, 12)); } } this.timer1 = setTimeout(() => { let temp = 0; if (this.dateData[1][this.hierarchy[1]] < 12) { temp = new Date(new Date(this.dateData[0][this.hierarchy[0]] + '/' + (this.dateData[1][this.hierarchy[1]]+1) + '/01').getTime() - 24 * 60 * 60 * 1000).getDate(); } else { temp = 31; } if (this.hierarchy[0] === 0 && this.dateData[1][this.hierarchy[1]] === ss[1] - 0) { this.$set(this.dateData, 2, this.setData(ss[2]-0, temp)); } else if (this.hierarchy[0] === es[0]-ss[0] && this.dateData[1][this.hierarchy[1]] === es[1] - 0) { this.$set(this.dateData, 2, this.setData(1, es[2] - 0)); } else { this.$set(this.dateData, 2, this.setData(1, temp)); } clearTimeout(this.timer1); this.timer2 = setTimeout(() => { this.canClick = true; clearTimeout(this.timer2); }, 20) }, delayer) } else { this.canClick = true; } } } } </script> <style lang="stylus" scoped> cssStyle() z-index 1 position absolute left 50% width 60% height 40% transform translateX(-50%) -webkit-transform translateX(-50%) content '' .picker position fixed top 0 left 0 width 100% height 100% .bg position absolute width 100% height 100% top 0 left 0 background-color rgba(0, 0, 0, .6) .piciker-cont position absolute bottom 0 left 0 width 100% background-color #fff .wheel-cont position relative width 100% height 150px overflow hidden padding-top 60px background-color #fff &::before top 0 cssStyle() border-bottom 1px solid #ddd background -webkit-gradient(linear,0 0,0 100%,from(rgba(255, 255, 255, 1)),to(rgba(255, 255, 255, 0.3))) background -moz-gradient(linear,0 0,0 100%,from(rgba(255, 255, 255, 1)),to(rgba(255, 255, 255, 0.3))) background gradient(linear,0 0,0 100%,from(rgba(255, 255, 255, 1)),to(rgba(255, 255, 255, 0.3))) &::after bottom 0 cssStyle() border-top 1px solid #ddd background -webkit-gradient(linear,0 0,0 100%,from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 1))) background -moz-gradient(linear,0 0,0 100%,from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 1))) background gradient(linear,0 0,0 100%,from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 1))) .item width 100% height 30px text-align center line-height 30px .btns position relative width 100% height 40px border-bottom 1px solid #ddd background-color #fff div position absolute top 0 width 60px font-size 16px text-align center line-height 40px cursor pointer &.sure right 0 color cornflowerblue &.cancel left 0 color #a0a0a0 .picker-contain display flex display -webkit-flex > div { flex-grow 1 } </style>
代码其实主要就是上面的这一段,代码了量不大,代码主要是分了三块,第一块是对参数进行校验,第二段是对datepicker进行初始化,第三段是在用户选择date的时候进行的一个数据展示的变化。最主要的一段逻辑在第三段,前面两段相对来说更容易,在用户滑动以后到最后选择到某一项的时候,会有一个调整位移到某一项的一个strenth的区域,这一块会消耗一点时间,这个是需要注意的,也是自测的时候不容易测出来的,在点击确认按钮的时候,需要左一层判断,如果还在作调整,是不能直接点击成功的,主要当选择项已经确定的时候才能点击成功,获取用户选择的数据。
这里主要是在better-scroll的基础上又加了一层封装,就是组件的二次封装。如果大家有更好的想法欢迎和我一起讨论哦,技术不分国界不分年龄,一起探讨,一起进步~