微信小程序 从底部弹起的滚动选择器 picker 组件

2023-11-04 08:20

本文主要是介绍微信小程序 从底部弹起的滚动选择器 picker 组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

完整微信小程序(Java后端) 技术贴目录清单页面(必看)

从底部弹起的滚动选择器。

属性类型默认值必填说明最低版本
header-textstring选择器的标题,仅安卓可用2.11.0
modestringselector选择器类型1.0.0
disabledbooleanfalse是否禁用1.0.0
bindcanceleventhandle取消选择时触发1.9.90

mode 的合法值

说明最低版本
selector普通选择器
multiSelector多列选择器
time时间选择器
date日期选择器
region省市区选择器

除了上述通用的属性,对于不同的mode,picker拥有不同的属性。

普通选择器:mode = selector

属性名类型默认值说明最低版本
rangearray/object array[]mode 为 selector 或 multiSelector 时,range 有效
range-keystring当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
valuenumber0表示选择了 range 中的第几个(下标从 0 开始)
bindchangeeventhandlevalue 改变时触发 change 事件,event.detail = {value}

多列选择器:mode = multiSelector

属性名类型默认值说明最低版本
rangearray/object array[]mode 为 selector 或 multiSelector 时,range 有效
range-keystring当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
valuearray[]表示选择了 range 中的第几个(下标从 0 开始)
bindchangeeventhandlevalue 改变时触发 change 事件,event.detail = {value}
bindcolumnchangeeventhandle列改变时触发

时间选择器:mode = time

属性名类型默认值说明最低版本
valuestring表示选中的时间,格式为"hh:mm"
startstring表示有效时间范围的开始,字符串格式为"hh:mm"
endstring表示有效时间范围的结束,字符串格式为"hh:mm"
bindchangeeventhandlevalue 改变时触发 change 事件,event.detail = {value}

日期选择器:mode = date

属性名类型默认值说明最低版本
valuestring当天表示选中的日期,格式为"YYYY-MM-DD"
startstring表示有效日期范围的开始,字符串格式为"YYYY-MM-DD"
endstring表示有效日期范围的结束,字符串格式为"YYYY-MM-DD"
fieldsstringday有效值 year,month,day,表示选择器的粒度
bindchangeeventhandlevalue 改变时触发 change 事件,event.detail = {value}

fields 有效值:*

说明
year选择器粒度为年
month选择器粒度为月份
day选择器粒度为天

省市区选择器:mode = region 1.4.0

属性名类型默认值说明最低版本
valuearray[]表示选中的省市区,默认选中每一列的第一个值
custom-itemstring可为每一列的顶部添加一个自定义的项1.5.0
bindchangeeventhandlevalue 改变时触发 change 事件,event.detail = {value, code, postcode},其中字段 code 是统计用区划代码,postcode 是邮政编码

示例代码

在开发者工具中预览效果

index.wxml

<view class="section"><view class="section__title">普通选择器</view><picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"><view class="picker">当前选择:{{array[index]}}</view></picker>
</view>
<view class="section"><view class="section__title">多列选择器</view><picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"><view class="picker">当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}</view></picker>
</view>
<view class="section"><view class="section__title">时间选择器</view><picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"><view class="picker">当前选择: {{time}}</view></picker>
</view><view class="section"><view class="section__title">日期选择器</view><picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"><view class="picker">当前选择: {{date}}</view></picker>
</view>
<view class="section"><view class="section__title">省市区选择器</view><picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}"><view class="picker">当前选择:{{region[0]}},{{region[1]}},{{region[2]}}</view></picker>
</view>

index.js

Page({data: {array: ['美国', '中国', '巴西', '日本'],objectArray: [{id: 0,name: '美国'},{id: 1,name: '中国'},{id: 2,name: '巴西'},{id: 3,name: '日本'}],index: 0,multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],objectMultiArray: [[{id: 0,name: '无脊柱动物'},{id: 1,name: '脊柱动物'}], [{id: 0,name: '扁性动物'},{id: 1,name: '线形动物'},{id: 2,name: '环节动物'},{id: 3,name: '软体动物'},{id: 3,name: '节肢动物'}], [{id: 0,name: '猪肉绦虫'},{id: 1,name: '吸血虫'}]],multiIndex: [0, 0, 0],date: '2016-09-01',time: '12:01',region: ['广东省', '广州市', '海珠区'],customItem: '全部'},bindPickerChange: function (e) {console.log('picker发送选择改变,携带值为', e.detail.value)this.setData({index: e.detail.value})},bindMultiPickerChange: function (e) {console.log('picker发送选择改变,携带值为', e.detail.value)this.setData({multiIndex: e.detail.value})},bindMultiPickerColumnChange: function (e) {console.log('修改的列为', e.detail.column, ',值为', e.detail.value);var data = {multiArray: this.data.multiArray,multiIndex: this.data.multiIndex};data.multiIndex[e.detail.column] = e.detail.value;switch (e.detail.column) {case 0:switch (data.multiIndex[0]) {case 0:data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];data.multiArray[2] = ['猪肉绦虫', '吸血虫'];break;case 1:data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];data.multiArray[2] = ['鲫鱼', '带鱼'];break;}data.multiIndex[1] = 0;data.multiIndex[2] = 0;break;case 1:switch (data.multiIndex[0]) {case 0:switch (data.multiIndex[1]) {case 0:data.multiArray[2] = ['猪肉绦虫', '吸血虫'];break;case 1:data.multiArray[2] = ['蛔虫'];break;case 2:data.multiArray[2] = ['蚂蚁', '蚂蟥'];break;case 3:data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];break;case 4:data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];break;}break;case 1:switch (data.multiIndex[1]) {case 0:data.multiArray[2] = ['鲫鱼', '带鱼'];break;case 1:data.multiArray[2] = ['青蛙', '娃娃鱼'];break;case 2:data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];break;}break;}data.multiIndex[2] = 0;console.log(data.multiIndex);break;}this.setData(data);},bindDateChange: function (e) {console.log('picker发送选择改变,携带值为', e.detail.value)this.setData({date: e.detail.value})},bindTimeChange: function (e) {console.log('picker发送选择改变,携带值为', e.detail.value)this.setData({time: e.detail.value})},bindRegionChange: function (e) {console.log('picker发送选择改变,携带值为', e.detail.value)this.setData({region: e.detail.value})}
})

运行结果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aq95WUcj-1622384776091)(image-20210529134951696.png)]

微信搜一搜【java1234】关注这个放荡不羁的程序员,关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

这篇关于微信小程序 从底部弹起的滚动选择器 picker 组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/344465

相关文章

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

Python基于微信OCR引擎实现高效图片文字识别

《Python基于微信OCR引擎实现高效图片文字识别》这篇文章主要为大家详细介绍了一款基于微信OCR引擎的图片文字识别桌面应用开发全过程,可以实现从图片拖拽识别到文字提取,感兴趣的小伙伴可以跟随小编一... 目录一、项目概述1.1 开发背景1.2 技术选型1.3 核心优势二、功能详解2.1 核心功能模块2.

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

python编写朋克风格的天气查询程序

《python编写朋克风格的天气查询程序》这篇文章主要为大家详细介绍了一个基于Python的桌面应用程序,使用了tkinter库来创建图形用户界面并通过requests库调用Open-MeteoAPI... 目录工具介绍工具使用说明python脚本内容如何运行脚本工具介绍这个天气查询工具是一个基于 Pyt

Ubuntu设置程序开机自启动的操作步骤

《Ubuntu设置程序开机自启动的操作步骤》在部署程序到边缘端时,我们总希望可以通电即启动我们写好的程序,本篇博客用以记录如何在ubuntu开机执行某条命令或者某个可执行程序,需要的朋友可以参考下... 目录1、概述2、图形界面设置3、设置为Systemd服务1、概述测试环境:Ubuntu22.04 带图

Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

《Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析》InstantiationAwareBeanPostProcessor是Spring... 目录一、什么是InstantiationAwareBeanPostProcessor?二、核心方法解

Python程序打包exe,单文件和多文件方式

《Python程序打包exe,单文件和多文件方式》:本文主要介绍Python程序打包exe,单文件和多文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python 脚本打成exe文件安装Pyinstaller准备一个ico图标打包方式一(适用于文件较少的程

C++ RabbitMq消息队列组件详解

《C++RabbitMq消息队列组件详解》:本文主要介绍C++RabbitMq消息队列组件的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. RabbitMq介绍2. 安装RabbitMQ3. 安装 RabbitMQ 的 C++客户端库4. A

Python程序的文件头部声明小结

《Python程序的文件头部声明小结》在Python文件的顶部声明编码通常是必须的,尤其是在处理非ASCII字符时,下面就来介绍一下两种头部文件声明,具有一定的参考价值,感兴趣的可以了解一下... 目录一、# coding=utf-8二、#!/usr/bin/env python三、运行Python程序四、

如何基于Python开发一个微信自动化工具

《如何基于Python开发一个微信自动化工具》在当今数字化办公场景中,自动化工具已成为提升工作效率的利器,本文将深入剖析一个基于Python的微信自动化工具开发全过程,有需要的小伙伴可以了解下... 目录概述功能全景1. 核心功能模块2. 特色功能效果展示1. 主界面概览2. 定时任务配置3. 操作日志演示