微信小程序没有select元素

小白的我又来了，今天遇到了一个很蠢的问题啊，没接触微信小程序多久，有个页面需要用到下拉选项，我顿时想到的是用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设计的样子，我要在原先的搜索框旁添加这个定位选择器。

下面的代码仅供参考，没有实际功能作用，这个是我特意写成静态效果的代码，不涉及到数据绑定，所以没写js代码。

aa.wxml

<view class='select-box'>
   <picker class='picker' bindchange='locationChange' value='hangzhou' range='[guangzhou,hangzhou,beijing,shenzhen]'>
      <view class='select'>全国   
        <image class='select-img'src="../../static/images/icon/down.png"></image>
       </view>
    </picker>
</view>   

 然后是 aa.wxss

.select-box{
  display: flex;
  align-items:center;
  padding-left:30rpx;
}
.select{ 
  font-size: 30rpx;
  padding:45rpx 0 30rpx 30rpx;
  color: #000;
}
.select-img{
   width:30rpx;
   height:30rpx;
}

做出来的效果就如上面需求一样的图片了，点击picker，这张图是微信小程序官网普通选择器的截图，如果是我代码出来的结果那就是没有中间的文字。

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