微信小程序> 微信小程序没有select元素

微信小程序没有select元素

浏览量:545 时间: 来源:青菜配白豆腐

小白的我又来了,今天遇到了一个很蠢的问题啊,没接触微信小程序多久,有个页面需要用到下拉选项,我顿时想到的是用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-styleString设置选择器中间选中框的样式 
indicator-classString设置选择器中间选中框的类名 
mask-styleString设置蒙层的样式 
mask-classString

设置蒙层的类名

区别

 

上面的图片是picker,下面的图片是picker-view,显而易见这里的picker-view能够加个小太阳,小月亮,但上面的picker就没有,这两张图片是截图与微信小程序官网的。之前听说picker有点小bug,没有picker-view好用,不知解决没有。

回到主题吧。我这页面的需求是做一个选择器,我这次选用picker来写。下图是UI设计的样子,我要在原先的搜索框旁添加这个定位选择器。

看这啥都没有,可能你觉得我有点坑,hhh。我在微信开发工具里预览的结果挺合心意,然后我在手机上预览了一下,也挺好,没遇到所谓的bug。可能不是我这个情况的吧。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎