1、創建和pages 同級的component目錄新建一個myToast目錄 例如:

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中將組件腳本引入供全局使用，引入方法：接收暴露出來的構造函數

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

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

8、在引入模塊組件 同級的js中實例組件的構造函數：

9、點擊按鈕實現效果

組件比較簡單、如果需求不同另行修改。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。