小程序组件的使用（一）创建组件

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

第一步：先创建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;//这里需要的数据有调用方传递到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.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传递过来的数据使用上 })