（1） 组件的 properties 属性是对外属性，我理解的是可以当做 data 数据来使用，它是一个含有三个属性的对象，分别是 type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数。type 是必填的，其它的可选。如果只有 type，可以写成：属性名：type类型。
（2） 组件的 data 和普通页面的data一样，是组件的内部数据，和 properties 一同用于组件的模版渲染。
（3） 组件的 method 是专门用于 事件响应函数 和 任意的自定义方法。在这里面获取数据有两种方法：一种是获取data里的数据： this.data.属性名；一种是获取 properties 中的属性值： this.properties.属性名
（4） 创建animation动画，作用在通过 true 和 false 切换显示状态的内容上没有过渡、没有过渡、没有过渡。
第四步：引入组件，传入组件所需数据
1. 引入前，需要在引入组件的页面的json文件中配置，比如我要在 index.wxml 中引入，那么在 index.json 中我就需要配置：
"usingComponents": { "Select": "/Componet/select/select" }
（1） Select 是你定义的组件的名称，后面的是组件所在的位置。 / 单斜杠表示根目录，是绝对路径。
（2） 如果出现下面这种说没找到路径的，一定是自己填写的路径不对，认真查找。
2. 配置好后，就可以引入组件。
<Select prop-array='{{selectArray}}'></Select>
（1） prop-array 是我自定义的属性名，这个是和组件所在的 js 中properties中的属性是对应的。在 properties 定义的属性中，属性名采用驼峰写法（例如：propArray）；在引入组件的 wxml 中，指定属性值时则对应使用连字符写法（例如：prop-array="..."）。
3. 最后就是传入数据了。在引入组件的js的data中，添加：
selectArray: [{ "id": "10", "text": "会计类" }, { "id": "21", "text": "工程类" }]
最终结果：
如果引入两个相同的组件，传入的数据也相同：
<Select prop-array='{{selectArray}}'></Select> <Select prop-array='{{selectArray}}'></Select>
总结
以上所述是小编给大家介绍的微信小程序自定义select下拉选项框组件的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: