小程序利用和 自定义时间选择组件
-
在component文件中新建picker组件
-
html页面代码如下
-
`
{{less.name}} {{less.name}} {{less.name}} 确定
{{ popupText }}
请选择用车时间
取消
`
4.wxss页面的代码如下
/* component/picker/picker.wxss */
/**picker**/
.pick-box {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.active-style {
border-radius:15rpx;
position: relative;
top: 3rpx;
left: 3rpx;
background: rgb(39, 90, 70,.5);
}
.picker-box {
position: fixed;
background: rgba(0, 0, 0, 0.2);
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 10000
}
.picker-style {
position: absolute;
z-index: 10001;
background: white;
bottom: 40rpx;
bottom: -100%;
width: 90%;
left: 5%;
border-radius: 30rpx;
}
.picker-line{
display: flex;
justify-content: center;
align-items: center;
}
.picker-but {
font-size: 36rpx;
color: #11141A;
box-sizing: border-box;
padding: 20px 20rpx;
padding-bottom: 0rpx;
display: flex;
justify-content: space-between;
}
.picker-but2{
width:646rpx;
margin: auto;
margin-top: 20rpx;
height:92rpx;
color: #fff;
line-height: 92rpx;
text-align: center;
background:rgba(7,202,123,1);
box-shadow:0rpx 4rpx 10rpx 0rpx rgba(17,20,26,0.1);
border-radius:15rpx;
}
.reminder-popup{
width: 452rpx;
position: absolute;
top: -80rpx;
left: 60rpx;
background: #fff;
padding: 24rpx 16rpx;
box-sizing: border-box;
font-size: 24rpx;
border-radius: 20rpx;
box-shadow:0px 4rpx 8rpx 0px rgba(0,0,0,0.1);
}
.reminder{
margin-left: 20rpx;
display: inline-block;
width: 20rpx;
height: 20rpx;
line-height: 20rpx;
border-radius: 50%;
background: rgba(7,202,123,1);
}
.picker-but view {
display: flex;
box-sizing: border-box;
font-size: 36rpx;
justify-content: center;
align-items: center;
height: 50rpx;
/* width: 100rpx; */
}
5.逻辑层的代码如下
const app = getApp()
Component({
properties: {
pickData: {
type: Object,
value: {},
observer: function (newVal) {
if (typeof newVal === 'object') {
this.setData({ listData: Object.values(newVal) })
}
}
},
popupText: {
type: String,
value: "预约用车: 司机将会在规定时间抵达上车点，您也可联系师傅提前用车。"
},
sureStyle: {
type: String,
value: ''
},
cancelStyle: {
type: String,
value: ''
},
openOrColse: {
type: Boolean,
value: false,
observer: function (newVal) {
if (String(newVal) === 'true') {
this.setData({ popupTextShow: true })
// this._openClosePicker()
}
}
},
open: {
type: Boolean,
value: false,
observer: function (newVal) {
if (String(newVal) === 'true') {
this.setData({ isOpen: true })
this._openClosePicker()
}
}
},
maskStyle: {
type: String,
value: ''
},
indicatorStyle: {
type: String,
value: ''
},
},
data: {
popupTextShow: false,
isOpen: false,
pickerBoxAnimation: {},
pickerAnimation: {},
pickeDate: [],
listData: [],
value: [],
info: {
H: '',
W: ''
}
},
attached() {
this._getScreen()
},
methods: {
//倒计时3秒 利用counting来判断是否正在进行倒计时，避免重复
_countDown(that, count) {
console.log(this.data.timeCountDownTop)
console.log(this.data.popupTextShow)
if (!this.data.popupTextShow) {
count = 0
that.setData({
timeCountDownTop: '0'
})
return
}
if (count == 0) {
console.log('在处理数据吗')
that.setData({
timeCountDownTop: '0',
popupTextShow: false
})
return;
}
that.setData({
popupTextShow: true,
timeCountDownTop: count,
})
setTimeout(function () {
count--;
that._countDown(that, count);
}, 1000);
},
_reminder() {
let that = this
this.setData({ popupTextShow: !this.data.popupTextShow })
that._countDown(that, 4);
this.triggerEvent('reminder', this.data.popupTextShow)
},
_getScreen() {
let that = this
wx.getSystemInfo({
success: function (res) {
let H = res.windowHeight
let W = res.windowWidth
const { info } = that.data
info.H = H
info.W = W
that.setData({ info })
}
})
},
_closePicker() {
let { pickeDate } = this.data
this.triggerEvent('close', pickeDate)
this.setData({ isOpen: false })
this._openClosePicker(1)
},
_bindChange(e) {
this.setData({
pickeDate: e.detail
})
var pickeDate = e.detail
this.triggerEvent('colChange', e.detail)
},
// _bindpickend(e){
// console.log(e)
// this.triggerEvent('bindEnd', e.detail)
// },
_surePicker() {
let { pickeDate } = this.data
if (JSON.stringify(pickeDate) === '[]') {
pickeDate = [0, 0, 0]
}
console.log(pickeDate)
this.triggerEvent('sure', pickeDate)
this.setData({ isOpen: false })
this._openClosePicker(1)
},
_openClosePicker(flag) {
let animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease',
})
let animationBox = wx.createAnimation({
duration: 500,
timingFunction: 'ease',
})
if (flag === 1) {
animation.bottom('-100%').step()
animationBox.bottom('-100%').step()
} else {
animation.bottom(0).step()
animationBox.bottom(20).step()
}
this.setData({
pickerBoxAnimation: animation.export(),
pickerAnimation: animationBox.export()
})
}
}
})
6.在需要用到组件的页面
引入组件在json文件中 “picker”: “/component/picker/picker”
} else {
minArr = [{
name: '0分',
value: 0
}, {
name: '10分',
value: 10
}, {
name: '20分',
value: 20
}, {
name: '30分',
value: 30
}, {
name: '40分',
value: 40
}, {
name: '50分',
value: 50
}];
for (let i = 0; i < 24; i++) {
if (i > hour) {
hourArr.push({
name: i + '点',
value: i
});
}
}
if (hourArr.length === 0) {
for (let i = 0; i < 24; i++) {
hourArr.push({
name: i + '点',
val: i
});
}
for (let i = 0; i < 3; i++) {
nowTime.setDate(nowTime.getDate() + 1);
dayArr.push({
name: i == 0 ? '今天' : i == 1 ? '明天' : '后天',
// name: (nowTime.getMonth() + 1) + '月' + nowTime.getDate() + '日',
value: Date.parse(nowTime)
});
}
} else {
for (let i = 0; i < 3; i++) {
dayArr.push({
name: i == 0 ? '今天' : i == 1 ? '明天' : '后天',
// name: (nowTime.getMonth() + 1) + '月' + nowTime.getDate() + '日',
value: Date.parse(nowTime)
});
nowTime.setDate(nowTime.getDate() + 1);
}
}
}
return [dayArr, hourArr, minArr];
},
// 获取时分
getDayMin: function () {
let minArr = [];
let hourArr = [];
for (let i = 0; i < 24; i++) {
hourArr.push({
name: i + ‘点’,
value: i
});
}
for (let i = 0; i < 6; i++) {
minArr.push({
name: (i * 10) + ‘分’,
value: i * 10
});
}
return [hourArr, minArr];
},
//获取东八区时间
getAbsTime: function () {
let currentZoneTime = new Date();
let currentZoneHours = currentZoneTime.getHours();
let offsetZone = currentZoneTime.getTimezoneOffset() / 60;
if (offsetZone > 0) {
// 大于0的是西区（西区晚） 西区应该用时区绝对值加京八区 重新设置时间
// 西区时间比东区时间晚 所以加时区间隔
offsetZone = offsetZone + 8;
currentZoneTime.setHours(currentZoneHours - offsetZone)
} else {
// 小于0的是东区（东区早） 东区时间直接跟京八区相加
offsetZone += 8;
currentZoneTime.setHours(currentZoneHours + offsetZone);
}
return currentZoneTime
},
以下分别是绑定的方法
//打车-改变预约时间
_colChange: function (e) {
// console.log(e)
let picker = this.initTimePicker();
var that = this;
let val = e.detail.value[0];
console.log(val, ‘看数据’)
if (val == 0) {
that.setData({
callCarPicker: picker
})
} else {
console.log(‘走这边了吗’)
that.setData({
‘callCarPicker[1]’: this.getDayMin()[0],
‘callCarPicker[2]’: this.getDayMin()[1],
})
// console.log(this.getDayMin()[0])
console.log(this.data.callCarPicker)
}
},
// 确认选中时间
_sure(e) {
var that = this;
let val = e.detail.value ? e.detail.value : e.detail;
let picker = that.data.callCarPicker;
console.log(picker)
this.setData({
openPicker: false,
callCar_nowTime: {
name: picker[0][val[0]].name + ’ ’ + (picker[1][val[1]].value > 9 ? picker[1][val[1]].value : ‘0’ + picker[1][val[1]].value) + ‘点’ + (picker[2][val[2]].value > 9 ? picker[2][val[2]].value : ‘0’ + picker[2][val[2]].value) + ‘分’,
value: new Date(picker[0][val[0]].value).setHours(picker[1][val[1]].value, picker[2][val[2]].value)
}
});
console.log(this.data.callCar_nowTime)
},
// 取消选择时间
_close(e) {
console.log(e.detail)
this.setData({
openPicker: false
})
console.log(‘点击了取消’)
},
// 打开时间选择器弹框
_openPick() {
let picker = this.initTimePicker();
this.setData({
openPicker: true,
callCarPicker: picker
})
},
最终呈现效果
点击小绿色点点会出现一个温馨提示弹窗
不过这个有个不好之处就是我选择了时间点击了确认之后再次点开我的时间还是这个样子展示，不是显示我之前选中的时间，希望哪位大佬能帮我瞅瞅
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
