1、创建和pages 同级的component目录新建一个myToast目录 例如:
image
2、myToast.wxml文件内容:
<!-- 自定义toast组件 -->
<!-- name 模块名称 -->
<template name="toast" >
<!-- catchtouchmove=‘xxx’ 遮罩层的滚动穿透 -->
<!-- isHide 显示消失 -->
<view class="toast_content_box" wx:if="{{ isHide }}"
catchtouchmove="preventdefault">
<view class="toast_content">
<view class='toast_content_text'>
<!-- 内容 -->
{{content}}
</view>
</view>
</view>
</template>
3、myToast.wxss文件样式（根据自己ui样式去写）：
.toast_content_box {
overflow: hidden;
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
position: fixed;
z-index: 999;
background-color: rgba(0, 0, 0, 0.3)
}
.toast_content {
width: 50%;
padding: 30rpx;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 20rpx;
}
.toast_content_text {
width: 100%;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center;
color: #fff;
font-size: 28rpx;
font-weight: 300;
}
4、myToast.js文件内容：
let _compData = {
'_toast_.isHide': false,// 控制组件显示隐藏
'_toast_.content': '',// 显示的内容
}
let toastPannel = {
// toast显示的方法
ShowToast: function (data) {
let self = this;
this.setData({ '_toast_.isHide': true, '_toast_.content': data });
},
// toast隐藏的方法
HideToast: function (data) {
let self = this;
self.setData({ '_toast_.isHide': false })
},
// toast显示的方法 2000后隐藏
ShowToastTime: function (data) {
let self = this;
this.setData({ '_toast_.isHide': true, '_toast_.content': data });
setTimeout(() => {
this.setData({ '_toast_.isHide': false, '_toast_.content': data });
}, 2000)
},
}
function ToastPannel() {
// 拿到当前页面对象
let pages = getCurrentPages();
let curPage = pages[pages.length - 1];
this.__page = curPage;
// 小程序最新版把原型链干掉了。。。换种写法
Object.assign(curPage, toastPannel);
// 附加到page上，方便访问
curPage.toastPannel = this;
// 把组件的数据合并到页面的data对象中
curPage.setData(_compData);
return this;
}
module.exports = {
ToastPannel
}
5、全局引入， 在项目中的app.js中将组件脚本引入供全局使用，引入方法：接收暴露出来的构造函数
image
6、 全局引入样式在app.wxss
image
7、在需要使用该组件的页面将模块引入：
image
8、在引入模块组件 同级的js中实例组件的构造函数：
image
9、点击按钮实现效果
image
组件比较简单、如果需求不同另行修改。
网友评论