微信小程序 组件和slot_微信小程序之自定义组件封装

本文将教你如何实现一个自定义的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)