小程序组件的使用(一) 创建组件

第一步：先创建components文件夹，放置整个项目的所有的组件。 第二步：在component文件夹中右键创建组件，名称为dialog。 接下来我们就需要对我们的弹出框组件进行设置了。

第三步：在dialog.wxml中写入弹出框代码：

<view wx:if="{{state}}" class='drop-bot' bindtap='closer'><view scroll-y="true" class="box {{first_click?'show':'hide'}} {{state?'open':'close'}}"><view style='height: 100%;' class="item_list"><scroll-view class='scroll' scroll-y="true" style='height: 275rpx'><view wx:for="{{account}}" wx:key="{{index}}" class=' li {{style}}' data-index="{{index}}" catchtap='select'>{{item.name}} </view></scroll-view><view class='li' catchtap='closer'>取消</view></view></view>
</view>

第四步：在dialog.wxss中写入样式代码：

/* 下拉框的实现 */
.drop-bot {width: 100%;height: 100%;position: fixed;bottom: 0;left: 0;background: rgba(0, 0, 0, .4);z-index: 1000;
}
.drop-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为消失，当然我们也可以通过定位，改变其top值也是可以的。

第五步：配置组件的业务逻辑：

// 弹出框组件
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,})},//点击遮罩层消失select: function (e) {var oIndex = e.currentTarget.dataset.index;var oAccount = this.data.account[oIndex].name;//这里需要的数据有调用方传递到propertiesthis.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.wxml

<!-- 触发下拉事件的按钮 -->
<view class='header' bindtap="toggle"><text>{{accouontName}}</text><text>切换</text></view>
<!-- 组件:下拉弹出框 -->
<template-dialog id="dialog" account="{{account}}" accountName="{{accountName}}" bind:action="switchAccount"></template-dialog>

注： 给头部添加点击事件toggle(toggle为dialog组件内方法) 在需要调用的页面中添加摸板，摸板的标签就是我们在json中配置的template-dialog名称， 模板中id是在该页面中给调用的摸板起一个名称，用于在js中调用(只能用id) account和accountName是我们将index中的数据传输到组件中，以供事件的正常执行。 bind:action="selected"是调用组件抛出的方法

为什么说toggle和action同为组件的方法我们却只在这里生命action呢？ 因为toggle虽是组件的方法，但我们只需要对他进行调用就可以，不需要进行任何的数据的传输，而action所代表的select事件则是需要我们在调用的时候进行 的数据的传输。

第七步：配置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;
}

第八步：配置index.json文件：

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

注： "template-dialog"是我们在调用摸板时给摸板所起的名称，后面为其路径

JS 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传递过来的数据使用上 })