微信小程序自定义组件简单实现

本文将教你如何实现一个自定义的toast提示框，实现后的基本效果图如下:




小程序中一个自定义组件由 

json

 

wxml

 

wxss

 

js

 4个文件组成的。下面我们一步一步地来创建文件及完成其中的配置：
step1：创建自定义组件首先创建一个components文件夹，用于放置所有自定义的组件，创建之后的目录结构为


其中的toastedit是我们本次要实现的toast提示框组件。step2：基本配置toastedit.json（进行自定义组件声明）
{
"component": true
}toastedit.wxml<view class='wx_toast_container' hidden="{{!toastShow}}">
<view class='wx_toast_text'>{{toastText}}</view>
</view>toastedit.wxss.wx_toast_container{
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.wx_toast_text{
background:rgba(0,0,0,0.95);
color:white;
text-align:center;
font-size:34rpx;
padding:34rpx 50rpx;
border-radius:20rpx;
max-width:70%;
min-width:35%;
box-sizing:border-box;
line-height:120%;
}toastedit.js

Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
*/
properties: {
toastText: {            // 属性名
type: String,
value: '内容'
}
},
/**
* 组件的初始数据
*/
data: {
toastShow:false,
},
/**
* 组件的方法列表
*/
methods: {
showToast(text,time) {
this.setData({
toastShow: !this.data.toastShow,
toastText: text
})

var that = this

if (!time){
time = 8000
}

setTimeout(function(){
that.setData({
toastShow: !that.data.toastShow
})
}, time)
}
}
})

step3：使用组件
我们要在index.wxml中使用组件的话，首先要在index.json中进行声明

{
"usingComponents": {
"toastedit": "/components/toastedit/toastedit"
}
}

紧接着需要在index.wxml中进行组件的引用

<view>
<toastedit id="toastedit">{{toastText}}</toastedit>
<button type="primary" bindtap="showToast"> showToast! </button>
</view>

最后index.js的配置如下Page({
onReady: function () {
//获得toastedit组件
this.toastedit = this.selectComponent("#toastedit")

},
showToast: function () {
this.toastedit.showToast('我是传过来的toast内容',2000)
}
})完成上面这几步，一个简单的小程序自定义组件就完成了，使用时只需要执行（可自定义提示框显示的文本及显示的时长）this.toastedit.showToast('哇塞！成功了~',2000)运行结果如下：



<
9026
/div>