当前位置: 首页 > 微信设置 > 小程序

微信小程序picker,picker组件

  • 小程序
  • 2025-07-08

微信小程序picker?拟设计一个设备故障状况选择器,需要三级联动,第一级:设备大类;第二级:设备细类;第三级:故障描述,如下图:1、需要引入vant-picker,需要定制一个数组,包含三级即[一级,一级内容,子类[二级,二级内容,子类[三级,三级内容]]],如下图 2、在vant-picker的onChange事件中,那么,微信小程序picker?一起来了解一下吧。

小程序picker组件

微信小程序让日期选择器循环的方法是:

1、自定义选择器组件需要用到picker-view跟picker-view-column。

2、打开选择器时就要获取到当前的年月日,使用for遍历直接生成年份数组跟月份数组。注:天数根据年份跟月份动态生成。

3、在选择的过程中,选择器有个改变事件,当年份或者月份改变的时候,天数要随之变化。

picker组件

开发微信小程序时,遇到需要实现日期时间筛选器的需求,发现官方提供的picker筛选器仅支持单独的日期或时间选择。因此,参考企业微信组件,自定义了一个日期时间筛选器。筛选器通过半屏弹窗和picker_view实现日期和时间的选择,最终通过事件返回毫秒级时间戳。具体实现包括:弹窗的显隐控制、筛选器类型、年和月的时间区间等配置项。

1. 弹窗显隐控制:通过show属性控制弹窗显示与否,默认为false。2. 筛选器类型:type属性控制支持的日期走向,center表示前后都支持,left表示往前,right表示往后。3. 时间区间:year属性控制年维度时间区间,month属性控制月维度时间区间,month不为undefined时year失效。实现思路是监听弹窗的显示状态,计算筛选器范围并初始化默认日期时间。

弹窗的wxml代码示例如下:

{{ item.name }}

{{ item }}

{{ item }}

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; }

以上就是自定义日期时间筛选器的实现过程,希望对开发者有所帮助。

listpicker

微信小程序中,为方便用户在填写地址时进行精确选择,内置了功能丰富的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显示了,内容来源于互联网,信息真伪需自行辨别。如有侵权请联系删除。

猜你喜欢