小程序picker用法

picker

从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分

普通选择器：mode = selector

多列选择器：mode = multiSelector（最低版本：1.4.0）

时间选择器：mode = time

日期选择器：mode = date

省市区选择器：mode = region（最低版本：1.4.0）

今天为大家介绍普通选择器和日期选择器

前端代码：普通选择器

<view class='course'><picker bindchange="bindPickerChange" value="{{index}}" range="{{objectArray}}" range-key='title'><view class="course_icon"><span>所属课程：{{periodsname}}</span><image src='../../images/right_arrow.png'></image></view></picker></view>

注意：当objectArray为二维数组时需要设置range-key='你需要显示的字段名' value={{index}} ，index就是数据的索引值。

日期选择器：

<view class='time'><picker mode="date" value="{{date}}" bindchange="bindDateChange"><view class="picker">截止时间：{{date}}</view></picker>

属性名	类型	默认值	说明	最低版本
value	String	0	表示选中的日期，格式为"YYYY-MM-DD"
start	String		表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
end	String		表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
fields	String	day	有效值 year,month,day，表示选择器的粒度
bindchange	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
bindcancel	EventHandle		取消选择时触发	1.9.90
disabled	Boolean	false	是否禁用

js代码:

data: {objectArray:null,periodsname:'',index:0,date: '',cid:0},/*** 时间*/bindDateChange(e) {this.setData({date: e.detail.value})},/*** 所属课程*/bindPickerChange: function (e) {var index = e.detail.value;//这里会获取他的索引值var self = this;var periodslist = self.data.objectArray;var checkeriods = periodslist[index];self.setData({periodsname: checkeriods['title'],cid: checkeriods['cid']})},

小程序picker用法相关推荐

小程序picker标题_微信小程序-自定义picker选择器
avatar 为什么要自定义picker 原生小程序picker不支持自定义样式,无联动. 该自定组件支持自定义数据支持自定义样式支持传入和返回对象或者基本类型支持联动(改变父列,子列根据关联 ...
小程序picker下拉框选择时间，只需要年和月
小程序picker下拉框选择时间,只需要年和月官方提供的组件可以选择到日我们现需要选择到月,只需要在代码里加上fields="month" <view class=&qu ...
微信小程序选择框问题小程序picker点击显示object range-key=这里写要显示的字段
微信小程序选择框问题小程序picker点击显示object range-key="这里写要显示的字段" <picker bindchange="bindClass ...
关于微信小程序picker之multiSelector多列选择器
文章目录前言使用步骤 1.wxml 2.读入数据总结前言由于业务场景,需要使用自定义内容的多列选择器,自然而然选择了微信小程序官方提供的picker选择器,mode模式为multiSelec ...
微信小程序的省市区三级地址mysql_微信小程序picker实现的省市区三级联动
微信小程序的省市区三级联动需要使用到的是Picker多列选择器,参考文档:https://www.w3cschool.cn/weix..., 案例中用到的省市区的json文件在文后发出出来. 废话不多 ...
小程序-picker之key-value形式
##小程序的picker的取值都是通过index 去取 <picker @change="statusChange" value="{{statusIdx}}&q ...
小程序——picker组件
转载:https://www.cnblogs.com/bgwhite/p/9335648.html 小程序自带的picker组件,picker一共分为三类普通选择器:mode = selector ...
range 小程序picker_微信小程序picker滚动选择器使用详解
今天修改小程序做章节内容筛选使用到了picker滚动选择器,看了官方文档和一些网上的文章后,终于算是弄明白了这个组件的使用,这里把我对这picker滚动选择器的使用记录下: picker基础使用 pi ...
微信小程序picker组件
在小程序的开发应用中,我们会经常用到picker组件. 官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/picker.h ...

小程序picker用法

小程序picker用法相关推荐

最新文章

热门文章