在小程序开发的第30天，整个项目的版本几乎可以说是手工的，但是整个项目的规模非常接近极限，因此必须对项目进行优化，所以我会与您分享有关我的信息。实际项目中总结的小程序组件的使用：

我与您共享的是底部弹出框的一部分。单击头部以切换效果，如图所示：

因为在许多页面上都需要这样的开关，并且需要底部弹出效果，所以我们需要打包。大家跟我来

第一步：首先创建components文件夹，以防止整个项目中的所有组件。

第2步：右键单击component文件夹以创建一个名为对话框的组件。

目录如下：

下一步，我们需要设置弹出框组件。

第3步：在dialog.wxml中编写弹出框代码：

{{item.name}} 取消

第4步：在dialog.wxss中编写样式代码：

/* 下拉框的实现 */.ｄｒｏｐ-bot { width: 100%; height: 100%; position: fixed; bottom: 0; left: 0; background: rgba(0, 0, 0, .4); z-index: 1000;}.ｄｒｏｐ-bot .box{ width: 100%; border-top: 1px solid #ddd; overflow: hidden; height: 0; animation-fill-mode: forwards; position: fixed; bottom: 0; left: 0; font-family: Monaco;">#fff;}.item_list .li.style { font-family: Monaco;">#f1f1f1;}.item_list .li{ width: 100%; height: 90rpx; line-height: 90rpx; overflow: auto; white-space: nowrap; display: flex; justify-content: center; align-items: center; border-bottom: 1rpx solid #ebebeb;}@keyframes slidedown{ from { height: 0; } to { height: 365rpx; }}@keyframes slideup{ from { height: 365rpx; } to { height: 0; }}.open{ animation: slidedown .5s;}.close{ animation: slideup .5s;}.hide{ display: none;}.show{ display: block;}

注意：弹出框从底部出现，因此实现的思路是：

可以通过css3动画将高度从0更改为一定的高度，并且可以通过添加不同的类名来引用不同的动画。 0-365表示出现，365-0表示消失。当然，我们也可以通过定位其顶部来更改value。

步骤5：为组件配置json，不需要默认配置，如下所示：

{ "component": true, "usingComponents": {}}

步骤6：配置组件的业务逻辑：

// 弹出框组件Component({/*** 组件的属性列表*/properties: { account: { type: Array, value: [] }, accountName: { type: String, value: "" }},//存放公共数据的地方，可以供调用方传递数据 /*** 组件的初始数据*/data: { state: false, first_click: false,},//私有属性的地方，data中的数据只有组件可以访问，外部无法访问 /*** 组件的方法列表*/methods: { closer: function (e) { this.setData({ state: false, }) },//点击遮罩层消失 ｓｅｌｅｃｔ: function (e) { var oIndex = e.currentTarget.dataset.index; var oAccount = this.data.account[oIndex].name;//这里需要的数据有调用方传递到properties this.setData({ state: false, }) this.triggerEvent("action",oAccount);//将该方法抛出 },//选择下拉的用户名称 toggle: function () { var list_state = this.data.state, first_state = this.data.first_click; if (!first_state) { this.setData({ first_click: true }); } if (list_state) { this.setData({ state: false }); } else { this.setData({ state: true }); } },//调出弹出框事件}//存放事件的地方})

到目前为止，该组件的配置已结束。接下来，我们需要配置调用者文件：

第七步是在页面上单击鼠标右键以创建索引目录，然后在名为index的目录中创建页面

第8步：配置index.wxml：

{{accouontName}}切换

注意：

将click事件切换添加到头部（切换是对话框组件中的方法）

将模板添加到需要调用的页面。模板的标签是我们在json中配置的模板对话框的名称，

模板中的id是页面上被调用模板的名称，用于调用js（只能使用id）

Account和accountName是我们将索引传输到组件以正常执行事件的数据。

bind：action =“ selected”是调用组件抛出的方法

为什么我们说切换和动作都是组件方法，但是我们只在这里进行动作？

因为toggle是组件的一种方法，但是我们只需要调用它，而无需任何数据传输，并且动作表示的ｓｅｌｅｃｔ事件需要我们在调用它时需要的数据。传输。

第9步：配置index.wxss：

.header { width: 100%; height: 90rpx; padding: 0 24rpx; box-sizing: border-box; font-family: Monaco; font-size: 11pt;">#16cc80; display: flex; justify-content: space-around; align-items: center;}

第十步：我们配置他的json文件：

{ "usingComponents": { "template-dialog": "/components/dialog/dialog" }}

注意：

“模板对话框”是我们在调用模板时给模板的名称，后跟路径

十一：接下来是我们的业务逻辑：

Page({ data: { accountName: "", account: [ { "name": "李小冉" }, { "name": "李冰" }, { "name": "李浩然" }, { "name": "李宗盛" }, ], }, onReady: function (e) { this.dialog = this.selectComponent("#dialog");//通过给组件所起的id调用组件 }, toggle: function (e) { this.dialog.toggle() }, //给头部添加的调出下拉框的事件 switchAccount: function (options) { this.setData({ accountName: options.detail }) }, //组件内部的方法将options传递过来的数据使用上})

接下来，我们编写一个弹出框组件。即使调用完成，实现也不复杂。关键是要了解组件的各种属性。

我的旅行者们，记得看看你的想法。