最近一直在看小程序相关的东西,前几天公司产品发的原形,看到用了比较多的下拉选择,小程序原生是没有Spinner下拉选择的,今天闲来无事决定自己写一个玩玩,先上图:
整体目录结构:
先在spinner.json中声明:"component": true,表示这是一个组件。
下面上代码:
wxml页面比较简单,就是一些view的嵌套,以及数据填充,为了让弹出的列表能有滑动的效果,外层用scrollview包裹。此处scrollview遇到了个坑,后面再讲。
wxss文件里面只是一些简单的样式。
一些关键方法都已经写到了注释中,但是淡入淡出动画还没实现,暂时不影响使用效果。
properties中声明的2个属性主要是为了在使用页面中传入响应的数据。
具体到页面中的使用:
现在要是用该组件的页面的json文件中声明:
然后是在对应页面的wxml文件中:
从这里就可以看到我们之前在properties中声明的2个属性,可以通过这2个属性把数据传入到我们的自定义组件中。
说到了在使用的页面把数据传入组件中,同样的我们也可以从组件中把数据通过triggerEvent方法传出到使用的页面中去。
triggerEvent('select', this.data.dataArray[idx])
第一个参数任意输,但是要和在使用页面的xml文件中的bind后缀相同,然后通过onSelect方法在使用的页面中去获取传出来的数据,这里需要注意的是onSelect不需要{{}}去包裹,不然会不执行。
第二个参数就是要传递出来的数据。可以通过e.detail来获取。
说一下目前自己理解的需要注意的事项:
1、使用scrollview时如果需要去掉滚动条,代码声明在组件的wxss文件中无效,需要在使用的页面的wxss页面中声明。
2、如果在使用的页面中发现组件的宽度没办法调整,可以在组件外层套一层view,控制外层的view宽度即可。
以上就是一个简单的下拉选择的实现,自己也还在摸索中,希望路过的大佬轻喷!感恩。