微信小程序 picker 及 picker-view 组件使用问题说明

11,634 阅读6分钟
听空白说,这个picker曾经是个巨坑,直到picker-view的出现。。。继续跟随组件更新的步伐,继续更新组件系列。。。
官方文档地址:
mp.weixin.qq.com/debug/wxado…
picker 从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器。 注意:开发工具暂时只支持mode = selector。


mp.weixin.qq.com/debug/wxado…
picker-view 嵌入页面的滚动选择器 注意:其中只可放置<picker-view-column/>组件,其他节点不会显示。 picker-view-column 仅可放置于<picker-view />中,其孩子节点的高度会自动设置成与picker-view的选中框的高度一致


相关文章:
微信小程序之picker
小程序踩坑记《二》页面关闭数据传递,picker的日期bug
时间选择器(年月日时分)datetime-picker
微信小程序小技巧系列《八》picker-view日期选择器,获取用户openId ...
微信小程序学习:使用picker封装省市区三级联动模板
微信小程序:tabbar未显示,页面之间传参,picker组件取值
微信小程序实现picker省市联动选择
微信小程序代码编辑工具中组件的默认样式设定

相关demo:
picker-view版本-省市区三级联动(api)
精品组件:艺龙小程序框架:picker,选择日历,下拉菜单
微信小程序实用demo:省市县三级联动
微信小程序demo:168彩票通;拼音排序组件
乐助:类似基于地理位置的到位;助人应用

相关讨论:
如何让picker里面的内容换行啊
小程序picker怎么设置一个类似input的placeholder的值

Q:picker日期模式iOS真机bug。选择了非start年份时,用户获得的月份 = 用户选择的月份 + start指定的月份 - 1 A:多谢反馈,尽快解决。 Q:现在picker-view触发bindchange要在滑动结束后,有时候还没滑完,就点确定按钮或者跳转页面,但是bindchange没有触发,就没有获取到数据。 A:谢谢反馈,下一版优化。 相关讨论:关于picker-view显示问题的反馈
将picker-view放在view容器中,使用绑定方式为view容器绑定样式。先设置成隐藏display:none,用按钮点击控制为显示,picker-view无法出现,其他控件没有问题。
使用picker-view自定义了一个组件(日期、星期+时间),放在view中,使用绑定方式为view容器绑定样式。先设置成隐藏display:none,用按钮点击控制为显示,picker-view无法出现,其他控件没有问题。

1.png (12.33 KB, 下载次数: 0)

下载附件

昨天 00:22 上传

2.jpg (40.36 KB, 下载次数: 0)

下载附件

昨天 00:22 上传




要先 block 然后再onload中none
我的解决方法是用z-index:-1,要显示的时候给成999


相关讨论:
picker选择器怎么给每一项带上例如option的name值
picker怎么能像option一样给每一项加上value和name然后在选择的时候获取啊?我现在要做一个城市选择,需要同时拿到城市的名字和编号,有没有大神可以讲解一下用picker怎么做
picker选择后,e.detail.value获取到的是数据源数组的下标值,你通过这个值去取数据源数组里的对象,比如cityList = [{id:1,name:'北京'},{id:2,name:'天津'},{id:3,name:'上海'}],选择后得到index = e.detail.value,对应的cityList[index].id就是编号,cityList[index].name就是名字



相关讨论:
picker-view VALUE 无法响应setData
picker-view 的value 做 setData 后,无变化。
预期效果应该是value 改变后,picker-view-column 滚动到响应的index 。
该问题已解决。


var _this = this;
    setTimeout(
        function(){
            _this.setData({"selected_region":sr});
        },500
    );
请教一个关于picker-view 的问题: 我想让picker-view默认隐藏,当触发目标元素时,它再显示, 我现在遇到的问题是当我点击目标元素后 picker-view 是显示了,但是 picker-view-column 下面的 view 的高度变为0了,这个问题怎么解决
最好是在样式表强制  picker-view-column >view 的 line-height 、height 、overflow 、white-space 等样式属性。
我现在的解决方案是把判断那块 hidden 改成了 wx:if ,效果显示正常。
相关讨论:
使用picker objectArray 是如何使用呀
<picker bindchange="Pickerarrive" value="{{indexrive}}" range="{{objectArray}}" range-key="{{name}}">
请给案例好?
问题解决了。就是 range-key="{{'name'}}"这里面要加''号


相关讨论:
picker-view的bug,view高度渲染成0
如题,如果把pick-view放在一个隐藏的view里面,picker-view-column里面的view高度会渲染成0;设置了高度也不行。
我也遇到这个问题,貌似必须一开始就初始化显示出来才可以; 然后在onLoad中将外层view的display设置为none,就可以了。

相关讨论:picker 组件中的文字大小是否支持修改?
支持修改


相关讨论:
picker 不支持直接使用key:value的json吗?
https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html 这个是picker的教程,但是看起来很繁琐,为什么不支持key:value的json?
支持的

相关讨论:
picker-view 初始值设置无效
原来 setData的时候不能 将列的初始化 和 指定初始值放在一起, 必须先初始化列表  再初始化值, 也就必须要指定两次次可以


相关讨论:
picker里面无内容不能触发
大多数需求中picker里面都是空的,             <picker class="section__content" ></picker>             <picker class="section__content">请选择</picker>
你需要在哪里点击调出picker,就把picker包在外层。
如果你想整个页面都能调用picker,那么就放在最外层


相关讨论:
picker-view 是否可以将日期、时间放在一块选择,为什么不支持放一块呢?
可以自定义picker-view-column实现的


相关讨论:红米手机上的picker 日期控件只能选择 到上一年 本年 和下一年
红米手机上的picker 日期控件只能选择 到上一年 本年 和下一年 , 这样做选择生日的时候就没办法用了。
<picker mode="date" value="{{date}}" start="1900-01-01" end="2099-12-31" bindchange="bindDateChange">
妥妥的解决你的问题

相关讨论:
使用picker-view怎么让选择第一列以后。让第二列恢复到第一个选项。
使用picker-view怎么让选择第一列以后。让第二列恢复到第一个选项。 或者说,怎么给picker-view赋值
onchange


相关讨论:
picker组件,需要在下来前做条件检查,符合条件则显示下来列表,不符合则不显示
现在暂时没有办法实现 用户点击后在 bindtap 等事件中做条件判断决定是否拉起列表的操作。

暂时可以考虑先用 picker 的 disabled 属性代替,如果不符合条件,则设置 disabled="{{true}}"
可以使用picker-view自定义一套组件