微信小程序picker？拟设计一个设备故障状况选择器，需要三级联动，第一级：设备大类；第二级：设备细类；第三级：故障描述，如下图：1、需要引入vant-picker，需要定制一个数组，包含三级即[一级，一级内容，子类[二级，二级内容，子类[三级，三级内容]]]，如下图 2、在vant-picker的onChange事件中，那么，微信小程序picker？一起来了解一下吧。
微信小程序让日期选择器循环的方法是：
1、自定义选择器组件需要用到picker-view跟picker-view-column。
2、打开选择器时就要获取到当前的年月日，使用for遍历直接生成年份数组跟月份数组。注：天数根据年份跟月份动态生成。
3、在选择的过程中，选择器有个改变事件，当年份或者月份改变的时候，天数要随之变化。
开发微信小程序时，遇到需要实现日期时间筛选器的需求，发现官方提供的picker筛选器仅支持单独的日期或时间选择。因此，参考企业微信组件，自定义了一个日期时间筛选器。筛选器通过半屏弹窗和picker_view实现日期和时间的选择，最终通过事件返回毫秒级时间戳。具体实现包括：弹窗的显隐控制、筛选器类型、年和月的时间区间等配置项。
1. 弹窗显隐控制：通过show属性控制弹窗显示与否，默认为false。2. 筛选器类型：type属性控制支持的日期走向，center表示前后都支持，left表示往前，right表示往后。3. 时间区间：year属性控制年维度时间区间，month属性控制月维度时间区间，month不为undefined时year失效。实现思路是监听弹窗的显示状态，计算筛选器范围并初始化默认日期时间。
弹窗的wxml代码示例如下：
js代码示例如下：
const utils = require('../../utils/util')Component({ options: { addGlobalClass: true }, properties: { show: { type: Boolean, value: false, observer: '_showChange' }, type: { type: String, value: 'center' }, year: { type: Number, value: 1 }, month: { type: [Number, String], value: 'undefined' } }, data: { dateIndex: null, hourValue: '', minValue: '', dateArr: [], hourArr: [], minArr: [], activeTime: null }, methods: { _showChange(e) { if (e) { this.handleDateData(); this.initData(); } }, handleSubmit() { this.bindclose(); this.triggerEvent('change', { value: this.data.activeTime }); }, initData() { const now = +new Date(); const index = this.data.dateArr.map(v = v.name).indexOf(utils.formatTime(now, '{m}月{d}日周{a}')); let tmp = this.data.dateArr; tmp[index].name = '今天'; this.setData({ dateIndex: index, hourValue: utils.formatTime(now, '{h}'), minValue: utils.formatTime(now, '{i}'), dateArr: tmp, activeTime: now }); }, handleDateData() { const nowYear = new Date().getFullYear(); let mins = []; let hours = []; let dates = []; for (let i = 0; i 60; i++) { mins.push(i.toString().length 2 ? '0' + i : i.toString()); } for (let j = 0; j 24; j++) { hours.push(j.toString().length 2 ? '0' + j : j.toString()); } dates = this.getDays(nowYear); this.setData({ hourArr: hours, minArr: mins, dateArr: dates }); }, getDays(year) { let pre_days = []; let now_days = []; let aft_days = []; if (this.data.month == 'undefined') { if (this.data.type == 'left') { for (let a = this.data.year; a = 1; a--) { pre_days.push(...this.getDaysByYear(year - a, true)); } } else if (this.data.type == 'right') { for (let b = 1; b = this.data.year; b++) { aft_days.push(...this.getDaysByYear(year + b, true)); } } else { for (let a = this.data.year; a = 1; a--) { pre_days.push(...this.getDaysByYear(year - a, true)); } for (let b = 1; b = this.data.year; b++) { aft_days.push(...this.getDaysByYear(year + b, true)); } } } now_days = this.getDaysByYear(year); return pre_days.concat(now_days.concat(aft_days)); }, getDaysByYear(year, isIncludeYear) { let days = []; for (let k = 1; k 13; k++) { let each_days = new Date(year, k, 0).getDate(); for (let _k = 1; _k = each_days; _k++) { let time = +new Date(`${year}-${k}-${_k}`); if (isIncludeYear) { days.push({ name: utils.formatTime(time, '{y}年{m}月{d}日周{a}'), value: time }); } else { days.push({ name: utils.formatTime(time, '{m}月{d}日周{a}'), value: time }); } } } return days; }, getDaysByMonth(year, type) { let days = []; let nowMonth = new Date().getMonth() + 1; if (this.data.month 0) { let months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; let pre_mons = []; let aft_mons = []; for (let k = 1; k = this.data.month; k++) { let tmp_pre = months.indexOf(nowMonth) - k; let tmp_aft = months.indexOf(nowMonth) + k; pre_mons.unshift(months[tmp_pre 0 ? 12 + tmp_pre : tmp_pre]); aft_mons.push(months[tmp_aft 12 ? tmp_aft - 12 : tmp_aft]); } if (type != 'right') { pre_mons.forEach(v = { let month_days = 0; if (v nowMonth) { month_days = new Date(year - 1, v, 0).getDate(); for (let k = 1; k = month_days; k++) { let time = +new Date(`${year - 1}-${v}-${k}`); days.push({ name: utils.formatTime(time, '{y}年{m}月{d}日周{a}'), value: time }); } } else { month_days = new Date(year, v, 0).getDate(); for (let k = 1; k = month_days; k++) { let time = +new Date(`${year}-${v}-${k}`); days.push({ name: utils.formatTime(time, '{m}月{d}日周{a}'), value: time }); } } }); } let month_days = new Date(year, nowMonth, 0).getDate(); for (let k = 1; k = month_days; k++) { let time = +new Date(`${year}-${nowMonth}-${k}`); days.push({ name: utils.formatTime(time, '{m}月{d}日周{a}'), value: time }); } if (type != 'left') { aft_mons.forEach(_v = { let month_days = 0; if (_v nowMonth) { month_days = new Date(year + 1, _v, 0).getDate(); for (let k = 1; k = month_days; k++) { let time = +new Date(`${year + 1}-${_v}-${k}`); days.push({ name: utils.formatTime(time, '{y}年{m}月{d}日周{a}'), value: time }); } } else { month_days = new Date(year, _v, 0).getDate(); for (let k = 1; k = month_days; k++) { let time = +new Date(`${year}-${_v}-${k}`); days.push({ name: utils.formatTime(time, '{m}月{d}日周{a}'), value: time }); } } }); } } else { let month_days = new Date(year, nowMonth, 0).getDate(); for (let k = 1; k = month_days; k++) { let time = +new Date(`${year}-${nowMonth}-${k}`); days.push({ name: utils.formatTime(time, '{m}月{d}日周{a}'), value: time }); } } return days; }, dateChange(e) { const day = this.data.dateArr[e.detail.value[0]]; let time = day.value + (Number(this.data.hourValue) * 3600 + Number(this.data.minValue) * 60) * 1000; this.setData({ dateIndex: e.detail.value[0], activeTime: time }); }, hourChange(e) { const hour = Number(this.data.hourArr[e.detail.value[0]]); let time = this.data.dateArr[this.data.dateIndex].value + (hour * 3600 + Number(this.data.minValue) * 60) * 1000; this.setData({ hourValue: this.data.hourArr[e.detail.value[0]], activeTime: time }); }, minChange(e) { const min = Number(this.data.minArr[e.detail.value[0]]); let time = this.data.dateArr[this.data.dateIndex].value + (Number(this.data.hourValue) * 3600 + min * 60) * 1000; this.setData({ minValue: this.data.minArr[e.detail.value[0]], activeTime: time }); }, bindclose() { this.setData({ show: false }); }, preventTouchMove() { // 阻止半屏状态下 页面滑动 } })
另外，wxss代码中用于样式定义的部分如下：
.selector__picker { width: 100%; height: 80%; margin-top: 20px; font-size: 24px; }
以上就是自定义日期时间筛选器的实现过程，希望对开发者有所帮助。
微信小程序中，为方便用户在填写地址时进行精确选择，内置了功能丰富的picker组件。这个组件支持五种不同的选择模式：普通选择器、多列选择器、时间选择器、日期选择器以及省市区选择器。接下来，我们将通过一个具体实例来详细了解这些选择器的用法。
实例演示将展示picker组件在实际应用中的操作，让你直观地掌握如何在小程序中实现省市选择以及其他选项的切换。通过这个实例，你可以更好地理解和运用picker组件提升用户体验。至于更多内容，我们会在后续的教程中继续探讨，敬请期待下一期的精彩内容。
在微信小程序开发中，我们常需要实现一个可搜索的picker组件，以提升用户体验。传统select组件在移动端使用体验较差，而picker组件虽然提供了滚动选择功能，但缺乏搜索能力。因此，我们决定自定义一个可搜索的picker组件，以满足需求。
该组件由myPicker.wxml、myPicker.js和myPicker.wxss三个部分组成。myPicker.wxml定义了组件的UI结构，包括一个隐藏的picker、一个搜索框和一个确定按钮。myPicker.js负责处理组件的逻辑，包括搜索、显示和隐藏picker等功能。myPicker.wxss则定义了组件的样式。
在myPicker组件中，我们使用了van-search组件来实现搜索功能，通过bind:change事件监听用户输入的变化，并将输入的关键词传递给父组件。同时，我们通过picker-view和picker-view-column组件来实现滚动选择功能。当用户选择某个学校后，通过触发自定义事件将选择结果传递给父组件。
在myPicker组件的data中，我们定义了一些重要的属性，如flag用于控制picker的显示与隐藏，searchValue用于存储用户输入的关键词，setValues用于存储滚动选择的学校列表，selectSchoolIndex用于存储用户选择的学校索引。
微信小程序中的picker组件是一个功能丰富的组件，它支持五种不同的选择模式：普通选择器、多列选择器、时间选择器、日期选择器以及省市区选择器。
普通选择器：用于在列表中单项选择，例如选择性别、职业等。
多列选择器：支持在多个列中进行选择，每列可以有多个选项，适用于需要从多个维度进行选择的情况，如选择衣服的尺码和颜色。
时间选择器：专门用于选择时间，用户可以方便地选择小时和分钟。
日期选择器：用于选择日期，用户可以浏览并选择特定的日期。
省市区选择器：特别设计用于地址选择，用户可以依次选择省、市、区，实现精确的地址定位。
picker组件的这些选择模式极大地丰富了小程序的用户交互体验，使得用户能够更便捷、准确地填写信息。
以上就是微信小程序picker的全部内容，于是我在服务器端把索引数组中的key和value用个循环分离出来，再存入新数组中。如图 [plain] view plain copy { a : 'a_value',b : 'b_value'} 改为 [plain] view plain copy { keys : [a, b],values : ['a_value', 'b_value']} 然后就可以用picker显示了，内容来源于互联网，信息真伪需自行辨别。如有侵权请联系删除。
