小程序如何封裝自定義組件（Toast）

1、創(chuàng)建和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中將組件腳本引入供全局使用眼虱，引入方法：接收暴露出來的構造函數