最近一直在看小程序相关的东西，前几天公司产品发的原形，看到用了比较多的下拉选择，小程序原生是没有Spinner下拉选择的，今天闲来无事决定自己写一个玩玩，先上图：

整体目录结构：

目录结构

先在spinner.json中声明："component": true,表示这是一个组件。

下面上代码：

wxml页面比较简单，就是一些view的嵌套，以及数据填充，为了让弹出的列表能有滑动的效果，外层用scrollview包裹。此处scrollview遇到了个坑，后面再讲。

spinner.wxml

wxss文件里面只是一些简单的样式。

spinner.js

一些关键方法都已经写到了注释中，但是淡入淡出动画还没实现，暂时不影响使用效果。

properties中声明的2个属性主要是为了在使用页面中传入响应的数据。

具体到页面中的使用：

现在要是用该组件的页面的json文件中声明：

testSpinner.json

然后是在对应页面的wxml文件中：

testSpinner.wxml

从这里就可以看到我们之前在properties中声明的2个属性，可以通过这2个属性把数据传入到我们的自定义组件中。

说到了在使用的页面把数据传入组件中，同样的我们也可以从组件中把数据通过triggerEvent方法传出到使用的页面中去。

triggerEvent('select', this.data.dataArray[idx])

第一个参数任意输，但是要和在使用页面的xml文件中的bind后缀相同，然后通过onSelect方法在使用的页面中去获取传出来的数据，这里需要注意的是onSelect不需要{{}}去包裹，不然会不执行。

第二个参数就是要传递出来的数据。可以通过e.detail来获取。

testSpinner.js

说一下目前自己理解的需要注意的事项：

1、使用scrollview时如果需要去掉滚动条，代码声明在组件的wxss文件中无效，需要在使用的页面的wxss页面中声明。

2、如果在使用的页面中发现组件的宽度没办法调整，可以在组件外层套一层view，控制外层的view宽度即可。

以上就是一个简单的下拉选择的实现，自己也还在摸索中，希望路过的大佬轻喷！感恩。