在小程序開發的第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傳遞過來的數據使用上
})
下來我們的一個彈出框組件的編寫，調用就算完成了，實現並不復雜，關鍵時對組件的各個屬性的了解。
各位同路人，記得看思路哦。