博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序---picker
阅读量:6338 次
发布时间:2019-06-22

本文共 980 字,大约阅读时间需要 3 分钟。

picker

从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。

 

 

 

wxml:

普通选择器(mode = selector)

<view class='cell-picker'>

<view class='cell-name'>chengshi</view>
<view class='cell-val'>
<picker mode = "selector"  bindchange="bindPickerChangeType" range-key="{
{'Name'}}" value="{
{
indexType}}" range="{
{array}}">{
{
array[indexType].Name}}</picker>
</view>
</view>

mode = selector:普通选择器

bindchange:value 改变时触发 change 事件

range-key: 当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容

value: value 的值表示选择了 range 中的第几个(下标从 0 开始)

range: mode为 selector 或 multiSelector 时,range 有效。

data:{ 

array: [
{
" Name": "shanghai",
"Id": "020"
}, {
"Name": "beijing ",
"Id": "005"
}, {
"Name": "tianjin",
"Id": "030"
}
],
indexType: 0, //选择了 range 中的第几个(下标从 0 开始)

}

//点击
bindPickerChangeType: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
indexType: e.detail.value
})
},

 

转载于:https://www.cnblogs.com/Super-scarlett/p/10039383.html

你可能感兴趣的文章
%r 和 %s 该用哪个?
查看>>
小公司职场不是“切糕”
查看>>
play工程部署到云服务器
查看>>
ListView 取消点击效果
查看>>
CentOS 6.5下编译安装新版LNMP
查看>>
Android Picasso
查看>>
top命令
查看>>
javascript的作用域
查看>>
新形势下初创B2B行业网站如何经营
查看>>
初心大陆-----python宝典 第五章之列表
查看>>
sysbench使用笔记
查看>>
有关电子商务信息的介绍
查看>>
NFC·(近距离无线通讯技术)
查看>>
多线程基础(三)NSThread基础
查看>>
PHP的学习--Traits新特性
查看>>
ubuntu下,py2,py3共存,/usr/bin/python: No module named virtualenvwrapper错误解决方法
查看>>
Ext.form.field.Number numberfield
查看>>
Linux文件夹分析
查看>>
解决部分月份绩效无法显示的问题:timestamp\union al\autocommit等的用法
查看>>
nginx 域名跳转 Nginx跳转自动到带www域名规则配置、nginx多域名向主域名跳转
查看>>