小程序如何封装自定义组件(Toast)-创新互联
1、创建和pages 同级的component目录新建一个myToast目录 例如:
创新互联是一家集网站建设,瑞昌企业网站建设,瑞昌品牌网站建设,网站定制,瑞昌网站建设报价,网络营销,网络优化,瑞昌网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。2、myToast.wxml文件内容:
{{content}}
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中将组件脚本引入供全局使用,引入方法:接收暴露出来的构造函数
6、 全局引入样式在app.wxss
7、在需要使用该组件的页面将模块引入:
8、在引入模块组件 同级的js中实例组件的构造函数:
9、点击按钮实现效果
组件比较简单、如果需求不同另行修改。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前文章:小程序如何封装自定义组件(Toast)-创新互联
网址分享:http://scyanting.com/article/cejjod.html