微信小程序下拉框插件_微信小程序:自定义组件（Component）

微信小程序文档中提供的组件有限，一定程度上限制了开发需求，这里就需要我们自定义一些控件，实现开发需求。自定义控件有两种方式，一种是选择模板的方式，另一种是选择组件的方式来创建。这里我选择了组件方式来创建，这样只需引入组件和外部添加数据，内部展示数据，即可实现重用。

目前微信小程序提供的组件

1、文件目录结构

这里一定要注意我们目录结构，个人喜好把项目中的业务文件放在pages中，图片放在与pages同级的images文件中，第三方的sdk存放在libs文件中，工具类存放在utils文件中，同样把共用的自定义组件存放在同级的component文件中。这样便于管理，查找使用。

组件文件

2、自定义组件

微信小程序中没有select下拉选项框，这里选择组件的方式来自定义创建一个select组件。

在component文件目录下，创建一个select文件夹，随后select文件夹下手动创建：select.js、select.json、select.wxml、select.wxss 四个文件。(注意： 可以在select文件夹下自动创建上面👆四个文件，自动创建的文件会自动配置好代码。只需在引入组件的时候，在引入组件的页面的json文件中配置组件的名称和组件的位置即可。)

2.2、配置组件

select.js、select.json、select.wxml、select.wxss上面四个文件是是我们手动创建的，那就需要我们手动配置代码。在json文件中写入代码："component": true 表示自定义组件声明，代码如下所示。

{

"component": true

}

同时，js文件中也需要写成这种格式，其代码如下：

Component({

/**

1. 组件的属性列表

*/

properties: {

selectArray: {

type: Array,

},

// 初始时要展示的内容

currentText:{

type:String,

}

},

/**

2. 组件的初始数据

*/

data: {