小白的我又来了,今天遇到了一个很蠢的问题啊,没接触微信小程序多久,有个页面需要用到下拉选项,我顿时想到的是用select元素和option元素,可惜微信小程序不如我意,就是不好使,没办法我上网一个搜索,却发现微信小程序没有这select和option这东西,那它用什么替代的呢。它是用picker这东西来实现的,不过这挺好还不用重新写个样式显示options。黑字白底清清楚楚,很好看。先看看微信小程序官网文档的话好了
picker
从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。
这有哪五种呢,这包括了:普通选择器:mode = selector、多列选择器:mode = multiSelector、时间选择器:mode = time、日期选择器:mode = date、省市区选择器:mode = region。 具体的内容点这里https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
这里提一嘴,除了第一个普通选择器可以不用写明mode=selector外,其他四个均要在元素中写明mode的类型,例如
页面需要什么类型的mode就用哪里一个。然后我就使用了这个picker,在微信小程序官网中还有一个picker-view,这里顺带说一下它俩区别:我个人看微信小程序官网文档有点看不懂它们之间的区别,因为例子好像都差不多,不过picker-view是 嵌入页面的滚动选择器, 我觉得它们之间的区别就是picker-view可以改变样式,因为它的属性里面有4个属性是跟样式有关的,如图。而picker的样式不能改。
| indicator-style | String | 设置选择器中间选中框的样式 | |
| indicator-class | String | 设置选择器中间选中框的类名 | |
| mask-style | String | 设置蒙层的样式 | |
| mask-class | String | 设置蒙层的类名 |
区别
上面的图片是picker,下面的图片是picker-view,显而易见这里的picker-view能够加个小太阳,小月亮,但上面的picker就没有,这两张图片是截图与微信小程序官网的。之前听说picker有点小bug,没有picker-view好用,不知解决没有。
回到主题吧。我这页面的需求是做一个选择器,我这次选用picker来写。下图是UI设计的样子,我要在原先的搜索框旁添加这个定位选择器。
看这啥都没有,可能你觉得我有点坑,hhh。我在微信开发工具里预览的结果挺合心意,然后我在手机上预览了一下,也挺好,没遇到所谓的bug。可能不是我这个情况的吧。













