1、創(chuàng)建和pages 同級(jí)的component目錄新建一個(gè)myToast目錄 例如:

2、myToast.wxml文件內(nèi)容:

<!-- 自定義toast組件 --> <!-- name 模塊名稱 --><template name="toast" ><!-- catchtouchmove=‘xxx’ 遮罩層的滾動(dòng)穿透 --><!-- isHide 顯示消失 --><view class="toast_content_box" wx:if="{{ isHide }}" catchtouchmove="preventdefault"> <view class="toast_content"> <view class='toast_content_text'><!-- 內(nèi)容 -->{{content}} </view></view> </view> </template> 復(fù)制代碼

3、myToast.wxss文件樣式（根據(jù)自己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; }復(fù)制代碼

4、myToast.js文件內(nèi)容：

let _compData = {'_toast_.isHide': false,// 控制組件顯示隱藏'_toast_.content': '',// 顯示的內(nèi)容 } 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() {// 拿到當(dāng)前頁(yè)面對(duì)象let pages = getCurrentPages();let curPage = pages[pages.length - 1];this.__page = curPage;// 小程序最新版把原型鏈干掉了。。。換種寫法Object.assign(curPage, toastPannel);// 附加到page上，方便訪問curPage.toastPannel = this;// 把組件的數(shù)據(jù)合并到頁(yè)面的data對(duì)象中curPage.setData(_compData);return this; } module.exports = {ToastPannel } 復(fù)制代碼

5、全局引入， 在項(xiàng)目中的app.js中將組件腳本引入供全局使用，引入方法：接收暴露出來(lái)的構(gòu)造函數(shù)

6、 全局引入樣式在app.wxss

7、在需要使用該組件的頁(yè)面將模塊引入：

8、在引入模塊組件 同級(jí)的js中實(shí)例組件的構(gòu)造函數(shù)：

9、點(diǎn)擊按鈕實(shí)現(xiàn)效果

組件比較簡(jiǎn)單、如果需求不同另行修改。

總結(jié)

以上是生活随笔為你收集整理的小程序如何封装自定义组件（Toast）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。