本文将教你如何实现一个自定义的toast提示框,实现后的基本效果图如下:
小程序中一个自定义组件由 json wxml wxss js 4个文件组成的。
1:创建自定义组件
首先创建一个components文件夹,用于放置所有自定义的组件,创建之后的目录结构为
其中的toastedit是我们本次要实现的toast提示框组件。
2:基本配置
toastedit.json(进行自定义组件声明)
{
"component": true
}
toastedit.wxml
{{toastText}}
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)
}
}
})
备注讲解:多slot是什么?
在组件模板中可以提供一个 节点,用于承载组件引用时提供的子节点。
1、单个slot,代码示例:
我是标准的
我是定制的内容
2、多个slot,代码示例:
我是标准的
// 第二步:启用插槽,components/music/index.js
Component({
// 启用插槽
options: {
multipleSlots: true
}
})
我是定制的内容2
我是定制的内容1
我是定制的内容2
下面讲,如何使用组件。
我们要在index.wxml中使用组件的话,首先要在index.json中进行声明
{
"usingComponents": { //声明要用
"toastedit": "/components/toastedit/toastedit"
名称:页面路由
}
}
紧接着需要在index.wxml中进行组件的引用
{{toastText}}
showToast!
最后index.js的配置如下
Page({
onReady: function () {
//获得toastedit组件
this.toastedit = this.selectComponent("#toastedit")
},
showToast: function () {
this.toastedit.showToast('我是传过来的toast内容',2000)
}
})
方法调用以及使用
this.toastedit.showToast('哇塞!成功了~',2000)