Na recente desenvolvimento de um programa pequeno micro-canal, que terá seletor tempo (selecionador), de acordo com suas próprias características e necessidades de desenvolvimento de conteúdo, fiz uma simples demonstração de seletor de tempo, podemos olhar para renderizações .
renderings:
No applet micro-canal, os arquivos são pontos de função, não js (principalmente eventos centrais de gravação), arquivo JSON (principalmente dados write), wxml (principalmente a estrutura da página) e wxss (principalmente estilo de página).
arquivo index.wxml:
Apresentando selecionador de arquivo wxml, um modo selecionador está definido, quando o valor muda evento função ligada, as colunas de seletor de rolagem vinculados função de evento, e outros correspondentes aos valores apresentados.
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<input value='{{time}}' placeholder='选择时间'/>
</picker>arquivo index.js:
Js fornecidas no arquivo de dados correspondente, enquanto o evento onLoad for concluída, evento bindMultiPickerChange, eventos bindMultiPickerColumnChange.
//引入事先写好的日期设置util.js文件
var datePicker = require('../../utils/dateSetting.js')
//设定当前的时间，将其设定为常量
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
Page({
//与wxml中的数据一一对应，在具体函数中修改time、multiArray、multiIndex等值，进行页面的呈现
data: {
time: '',
multiArray: [],
multiIndex: [0, 0, 0, 0, 0],
choose_year: "",
},
//Page原始的加载函数，设定multiArray，其中datePicker中的函数，会在下面的js中呈现。
onLoad: function () {
this.setData({
multiArray:
[
[year + "年", year + 1 + "年", year + 2 + "年"],
datePicker.determineMonth(),
datePicker.determineDay(year, month),
datePicker.determineHour(),
datePicker.determineMinute()
],
})
},
//最后呈现时间的函数。
bindMultiPickerChange: function (e) {
var dateStr = this.data.multiArray[0][this.data.multiIndex[0]] +
this.data.multiArray[1][this.data.multiIndex[1]] +
this.data.multiArray[2][this.data.multiIndex[2]] +
this.data.multiArray[3][this.data.multiIndex[3]] +
this.data.multiArray[4][this.data.multiIndex[4]];
this.setData({
time: dateStr
})
},
//当时间选择器呈现并进行滚动选择时间时调用该函数。
bindMultiPickerColumnChange: function (e) {
//e.detail.column记录哪一行发生改变，e.detail.value记录改变的值（相当于multiIndex）
switch (e.detail.column) {
//这里case的值有0/1/2/3/4,但除了需要记录年和月来确定具体的天数外，其他的都可以暂不在switch中处理。
case 0:
//记录改变的年的值
let year = this.data.multiArray[0][e.detail.value];
this.setData({
choose_year: year.substring(0, year.length - 1)
})
break;
case 1:
//根据选择的年与月，确定天数，并改变multiArray中天的具体值
let month = this.data.multiArray[1][e.detail.value];
let dayDates = datePicker.determineDay(this.data.choose_year, month.substring(0, month.length - 1));
//这里需要额外注意，改变page中设定的data，且只要改变data中某一个值，可以采用下面这种方法
this.setData({
['multiArray[2]']: dayDates
})
break;
}
//同上，上面改变的是二维数组中的某一个一维数组，这个是改变一个一维数组中某一个值，可供参考。
this.setData({
["multiIndex[" + e.detail.column + "]"]: e.detail.value
})
},
})utils pasta de arquivo dateSetting.js:
Se houver mais selecionador de tempo, e precisa de várias páginas, você pode escrever uma função pública, onde eu escrevi uma função para determinar o mês, dia, hora e minuto.
//将当前日期写成常量
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDay()+1;
const hour = date.getHours();
const minute = date.getMinutes();
//确定月份呈现
function determineMonth() {
let monthDates = [];
for (let i = month; i <= 12; i++) {
monthDates.push(i + "月");
}
for (let i = 1; i < month; i++) {
monthDates.push(i + "月")
}
return monthDates;
}
//根据年与月确定日的呈现
function determineDay(year, month) {
let dayDates = [];
let days;
switch (parseInt(month)) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
days = 31;
break;
case 4:
case 6:
case 9:
case 11:
days = 30;
break;
case 2:
if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
days = 28
} else days = 29;
}
for (let i = day; i <= days; i++) {
dayDates.push(i + "日");
}
for (let i = 1; i <= day; i++) {
dayDates.push(i + "日");
}
return dayDates;
}
//确定小时的呈现
function determineHour() {
let hourDates = [];
for (let i = hour; i <= 24; i++) {
hourDates.push(i + "时");
}
for (let i = 1; i < hour; i++) {
hourDates.push(i + "时");
}
return hourDates;
}
//确定分的呈现
function determineMinute() {
let minuteDates = [];
let minuteNum=0;
if (parseInt(minute) % 10 >= 5) {
minuteNum = (parseInt(minute / 10) + 1) * 10;
} else {
minuteNum = parseInt(minute / 10) * 10;
}
for (let i = minuteNum; i < 60; i += 5) {
minuteDates.push(i + "分")
}
for (let i = 0; i < minuteNum; i += 5) {
minuteDates.push(i + "分")
}
return minuteDates;
}
//将上述函数导出，这样引入文件后可以直接使用导出的函数
module.exports = {
determineMonth:determineMonth,
determineDay:determineDay,
determineHour:determineHour,
determineMinute:determineMinute,
}conclusão:
Após a conclusão do referido documento, compilado para rodar, efeitos funcionais podem ser apresentados na figura, espero que este blog para sua ajuda.
