微信小程序手写时间间隔组件，可设置间隔时间一分钟，半小时，一小时的间隔

纯手写时间间隔组件

需求：小程序中可以根据时间段进行选择开始时间和结束时间，如：当前时间是09：00，
则我可以从9点开始选择时间，每半个小时为间隔，那么下一个时间就算9：30，10：00，依次类推
就像element-ui中有个时间选择器就可以根据自己设置的时间间隔去选择，可以0.5小时，1小时或者2.5小时的间隔进行选择
由于公司小程序用的是vant-ui来开发的，我去找vant的时间组件，发现没有这样的，所以决定自己开发一下这个组件

这是element-ui的选择时间

!!!注意：

由于公司用的是vant,所以弹窗按钮用的都是我们用vant自己封装的组件，
在这里就不展示弹窗组件还有按钮了，弹窗和按钮就得大家自己用自己的框架去显示了

看效果

在这里插入图片描述
间隔一小时

提前30分钟和推迟30分钟当前时间10：51

创建 time-interval组件如果你想全局使用则在app.json的usingComponents中添加你得组件地址

 "usingComponents": {"time-interval": "/components/time-interval/time-interval"}

创建好后就开始编码 HTML部分

<!-- 这个是我们自己封装的按钮组件 -->
<import src="../../static/templates/template.wxml"></import>
<!-- 工具类 -->
<wxs src="./util.wxs" module="computed" />
<!-- 这个是自己封装的弹窗组件 -->
<custom-popupcustomStyle="width: 100%;max-height: calc(100% - 148rpx); overflow: hidden; border-radius: 24rpx 24rpx 0 0;"hidden="{{!isShowTime}}" isShowPopup="{{isShowTime}}" title="{{title}}"isCloseOnClickOverlay="{{isCloseOnClickOverlay}}" bindhidePopup="hidePopup" bind:titleTap="titleTap">
<!-- 具体的时间间隔代码如下 --><view class="w-time_container"><view class="w-t_left" data-type="startOptions" bind:touchstart="onTouchStart" catch:touchmove="onTouchMove"bind:touchend="onTouchEnd" bind:touchcancel="onTouchEnd"><viewstyle="{{ computed.wrapperStyle({ offset:startOptions.offset, itemHeight, visibleItemCount, duration:startOptions.duration }) }}"><view class="w-time_row {{index===startOptions.currentIndex?'w-check_box':''}}"style="height: {{ itemHeight }}px" wx:for="{{timeList}}" wx:key="index" data-item="{{item}}"data-index="{{ index }}" data-type="startOptions" bind:tap="onClickItem">{{item.time}}</view></view></view><view class="w-t_right" data-type="endOptions" bind:touchstart="onTouchStart" catch:touchmove="onTouchMove"bind:touchend="onTouchEnd" bind:touchcancel="onTouchEnd"><viewstyle="{{ computed.wrapperStyle({ offset:endOptions.offset, itemHeight, visibleItemCount, duration:endOptions.duration }) }}"><viewclass="w-time_row {{index===endOptions.currentIndex?'w-check_box':''}} {{startTime.timeStamp>=item.timeStamp?'w-disabled':''}}"wx:for="{{timeList}}" wx:key="index" data-item="{{item}}" data-index="{{ index }}"data-type="endOptions" bind:tap="{{startTime.timeStamp>=item.timeStamp?'':'onClickItem'}}">{{item.time}}</view></view></view><view class="w-pick_mask" style="background-size: 100% 40%;"></view></view><!-- 这个是按钮组件 --><template is="iconBtn" data="{{btnText: '确定', btnTap: 'confirmTime'}}"></template>
</custom-popup>

js部分


/*** 获取当前天时间* @param param 【Y:年；M:月；D:日；h:小时；m:分钟；s:秒；】 默认精确到秒* @returns {*}*/
function getCurrentDate(param = 's', target = '') {var now = target ? new Date(toIosDate(target)) : new Date();var year = now.getFullYear(); //得到年份var month = now.getMonth(); //得到月份var date = now.getDate(); //得到日期var day = now.getDay(); //得到周几var hour = now.getHours(); //得到小时var minu = now.getMinutes(); //得到分钟var sec = now.getSeconds(); //得到秒month = month + 1;if (month < 10) month = "0" + month;if (date < 10) date = "0" + date;if (hour < 10) hour = "0" + hour;if (minu < 10) minu = "0" + minu;if (sec < 10) sec = "0" + sec;const arr = {'Y': year,'M': year + "-" + month,'D': year + "-" + month + "-" + date,'h': year + "-" + month + "-" + date + " " + hour,'m': year + "-" + month + "-" + date + " " + hour + ":" + minu,'s': year + "-" + month + "-" + date + " " + hour + ":" + minu + ":" + sec}return {year,month,day: date,hour,minu,sec,date: arr[param]};
}function range(num, min, max) {return Math.min(Math.max(num, min), max);
}function isObj(x) {const type = typeof x;return x !== null && (type === 'object' || type === 'function');
}
const DEFAULT_DURATION = 200;
let app = getApp();
let isIOS = /ios/ig.test(app.globalData.systemInfo.system);
/*** 判断是否是iso,ios的话时间格式会有问题得2023/09/13,以斜杠的格式传入* @param {时间} date */
function toIosDate(date) {return isIOS ? date.replace(/-/g, '/') : date
}
Component({options: {addGlobalClass: true,styleIsolation: "apply-shared"},/*** 组件的属性列表*/properties: {// 是否显示isShowTime: {type: Boolean,value: false,observer: 'initArr'},// 标题title: {type: String,value: '选择时间'},// 点击蒙层是否关闭弹窗isCloseOnClickOverlay: {type: Boolean,value: false},//间隔时间intervalTime: {type: Number,value: 1/60, //单位小时},//是否是推迟还是提前多少分钟 提前则大于0，推迟则小于0，且不能大于一天hasDelay: {type: Number,value: 0, //单位分钟},//选择的日期,默认当天的日期curDate: {type: String,valeu: getCurrentDate('D').date},//可见的选项个数visibleItemCount: {type: Number,value: 6},//选项高度itemHeight: {type: Number,value: 44}},/*** 组件的初始数据*/data: {startTime: {},endTime: {},timeList: [],startOptions: {startY: 0,startOffset: 0,duration: 0,offset: 0,currentIndex: 0},endOptions: {startY: 0,startOffset: 0,duration: 0,offset: 0,currentIndex: 0}},/*** 组件的方法列表*/methods: {initArr(nv, ov) {if (nv) {const {date,hour,minu,} = getCurrentDate('D')const w_date = this.properties.curDate ? (date === this.properties.curDate ? '' : `${this.properties.curDate} 00:00`) : `${date} ${hour}:${minu}`this.setData({timeList: this.createTime(getCurrentDate('D', w_date), this.properties.intervalTime)})this.setIndex(0, 'startOptions');this.setIndex(1, 'endOptions');}},createTime(target, h = 1) {const {hour,minu,date} = targetconst e_date = this.getRecentDate(1, this.properties.curDate)let arr = []let startStamp = new Date(toIosDate(date + ` ${hour}:${minu}`)).getTime()//是否是推迟还是提前多少分钟if (Math.abs(this.properties.hasDelay) > 0) {startStamp = startStamp + this.properties.hasDelay*60*1000} const endStamp = new Date(toIosDate(e_date + ' 00:00')).getTime()for (let i = startStamp; i < endStamp; i += (h * 60 * 60 * 1000)) {const res = this.formatDate(i)arr.push({time: res.time,date: res.date,dateM: res.dateM,timeStamp: i,disabled: false})}return arr},confirmTime() {if (!this.data.endTime.timeStamp) {return wx.showToast({title: '请选择结束时间',icon: 'none',})}this.triggerEvent('chooseInterver', {startTime: this.data.startTime,endTime: this.data.endTime})},//时间戳转换formatDate(target) {const date = new Date(target)let year = date.getFullYear();let months = date.getMonth() + 1;let month = (months < 10 ? '0' + months : months).toString();let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();let min = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();let sec = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();return {year: year.toString(),month,day,hours,min,sec,time: hours + ":" + min,date: year + "-" + month + "-" + day + " " + hours + ":" + min,dateM: year + "-" + month + "-" + day}},//计算当前时间几天后的数据getRecentDate(day, target) {var date1 = target ? new Date(toIosDate(target)) : new Date(),time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate(); //time1表示当前时间var date2 = new Date(date1);date2.setDate(date1.getDate() + day);const y = date2.getFullYear();const m = (date2.getMonth() + 1) > 9 ? (date2.getMonth() + 1) : '0' + (date2.getMonth() + 1)const d = date2.getDate() > 9 ? date2.getDate() : '0' + date2.getDate()let h = date2.getHours() < 10 ? '0' + date2.getHours() : date2.getHours();let n = date2.getMinutes() < 10 ? '0' + date2.getMinutes() : date2.getMinutes();let s = date2.getSeconds() < 10 ? '0' + date2.getSeconds() : date2.getSeconds();return y + "-" + m + "-" + d;},hidePopup() {this.setData({[`startOptions.startY`]: 0,[`startOptions.startOffset`]: 0,[`startOptions.duration`]: 0,[`startOptions.currentIndex`]: 0,[`endOptions.startY`]: 0,[`endOptions.startOffset`]: 0,[`endOptions.duration`]: 0,[`endOptions.currentIndex`]: 0,})this.triggerEvent('close')},titleTap() {this.triggerEvent('titleTap')},getCount() {return this.data.timeList.length;},onTouchStart(event) {const options = event.currentTarget.dataset.typethis.setData({[`${options}.startY`]: event.touches[0].clientY,[`${options}.startOffset`]: this.data[options].offset,[`${options}.duration`]: 0,});},onTouchMove(event) {const options = event.currentTarget.dataset.typeconst deltaY = event.touches[0].clientY - this.data[options].startY;this.setData({[`${options}.offset`]: range(this.data[options].startOffset + deltaY,-(this.getCount() * this.properties.itemHeight),this.properties.itemHeight),});},onTouchEnd(event) {const options = event.currentTarget.dataset.typeif (this.data[options].offset !== this.data[options].startOffset) {this.setData({[`${options}.duration`]: DEFAULT_DURATION});const index = range(Math.round(-this.data[options].offset / this.data.itemHeight),0,this.getCount() - 1);this.setIndex(index, options);}},onClickItem(event) {const options = event.currentTarget.dataset.typeconst {index} = event.currentTarget.dataset;this.setIndex(index, options);},/*** 设置位置* @param {*} index 数组下标 位置* @param {*} options 数据类型*/setIndex(index, options) {const {data} = this;index = this.adjustIndex(index) || 0;const offset = -index * this.properties.itemHeight;if (index !== data[options].currentIndex) {this.setData({[`${options}.offset`]: offset,[`${options}.currentIndex`]: index,[`${options==='startOptions'?'startTime':'endTime'}`]: this.data.timeList[index]})//判断结束时间是否大于开始时间，是则选择否则为空if (options === 'endOptions') {if (this.data.startTime.timeStamp < this.data.timeList[index].timeStamp) {this.setData({endTime: this.data.timeList[index]})} else {this.setData({endTime: {}})}}else{this.setData({endTime: {}})}} else {this.setData({[`${options}.offset`]: offset,[`${options==='startOptions'?'startTime':'endTime'}`]: this.data.timeList[index]});}},adjustIndex(index) {const count = this.getCount();index = range(index, 0, count);for (let i = index; i < count; i++) {if (!this.isDisabled(this.data.timeList[i])) return i;}for (let i = index - 1; i >= 0; i--) {if (!this.isDisabled(this.data.timeList[i])) return i;}},isDisabled(option) {return isObj(option) && option.disabled;},}
})

css 部分

.w-time_container {position: relative;height: 600rpx;width: 100%;padding: 8rpx;box-sizing: border-box;display: flex;
}.w-t_left,
.w-t_right {width: 50%;height: 100%;display: flex;padding: 48rpx 0;flex-direction: column;align-items: center;box-sizing: border-box;overflow: hidden;
}.w-pick_mask{position: absolute;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)), linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));background-repeat: no-repeat;background-position: top, bottom;transform: translateZ(0);pointer-events: none;
}.w-time_row {width: 100%;display: flex;align-items: center;justify-content: center;font-size: 32rpx;font-weight: 600;box-sizing: border-box;
}.w-check_box {color: #264AFF;
}
.w-disabled {color: #0A1B33B3;
}

工具类util.wxs

function addUnit(value) {if (value == null) {return undefined;}var REGEXP1 = getRegExp('^-?\d+(\.\d+)?$');return REGEXP1.test('' + value) ? value + 'px' : value;
}
var REGEXP2 = getRegExp('{|}|"', 'g');function keys(obj) {return JSON.stringify(obj).replace(REGEXP2, '').split(',').map(function (item) {return item.split(':')[0];});
}function kebabCase(word) {var newWord = word.replace(getRegExp("[A-Z]", 'g'), function (i) {return '-' + i;}).toLowerCase()return newWord;
}function isArray(array) {return array && array.constructor === 'Array';
}function style(styles) {if (isArray(styles)) {return styles.filter(function (item) {return item != null && item !== '';}).map(function (item) {return style(item);}).join(';');}if ('Object' === styles.constructor) {return keys(styles).filter(function (key) {return styles[key] != null && styles[key] !== '';}).map(function (key) {return [kebabCase(key), [styles[key]]].join(':');}).join(';');}return styles;
}function wrapperStyle(data) {var offset = addUnit(data.offset + (data.itemHeight * (data.visibleItemCount - 1)) / 2);return style({transition: 'transform ' + data.duration + 'ms','line-height': addUnit(data.itemHeight),transform: 'translate3d(0, ' + offset + ', 0)',});
}module.exports = {wrapperStyle: wrapperStyle,
};

Attributes

参数	说明	类型	可选值	默认值
intervalTime	间隔时间（单位小时）	Number	1/60(一分钟);30/60(30分钟); 1(1小时);2.5(两个半小时)	1/60
hasDelay	是否是推迟还是提前多少分钟提前则大于0，推迟则小于0，且不能大于一天	Number	10(提前10分钟)；-10(推迟10分钟)	0
curDate	选择的日期,默认当天的日期	String	2023-02-11或 2023-02-11 09:00:00	当天时间