在小程序开发的第30天，整个版本的项目可以说是差不多手工，但是总体的项目大小已经非常接近限度，所以说项目的优化势在必行，所以我给大家分享关于我在项目实战中总结的小程序组件的使用：
我给大家分享的是一个底部弹框的一个组件，点击头部切换效果如图：
因为在很多页面都需要这样的一个切换，底部弹框效果，所以说我们需要进行一个封装。这里大家跟紧我
第一步：先创建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值也是可以的。
第五步：为组件配置json，默认不用配置如下：
{
"component": true,
"usingComponents": {}
}
第六步：配置组件的业务逻辑：
// 弹出框组件
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
});
}
},//调出弹出框事件
}//存放事件的地方
})
至此组件的配置也就结束了，下来我们需要进行调用方文件的配置：
第七步在pages中创建右键创建index目录，在该目录中创建page命名为index
第八步：配置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;
}
第十步：我们配置他的json文件：
{
"usingComponents": {
"template-dialog": "/components/dialog/dialog"
}
}
注：
“template-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传递过来的数据使用上
})
下来我们的一个弹出框组件的编写，调用就算完成了，实现并不复杂，关键时对组件的各个属性的了解。
各位同路人，记得看思路哦。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/5366.html