微信小程序實現頁面監聽自定義組件的(de)觸發事件

發表時(shí)間：2021-1-5

發布人(rén)：融晨科技

浏覽次數：92

需求：在(zài)微信小程序開發過程中，頁面通常會用到(dào)提示彈框。這(zhè)時(shí)爲(wéi / wèi)了(le／liǎo)減少代碼量及代碼可拓展性，我們自定義一個(gè)提示組件是(shì)必不(bù)可少的(de)了(le／liǎo)。那麽問題來(lái)了(le／liǎo)，頁面如何監聽到(dào)組件的(de)觸發事件呢？

下面給大(dà)家詳細講解頁面如何監聽自定義組件的(de)觸發事件。

prompt組件：

首先搭建提示組件ui。由于(yú)後面各個(gè)頁面都有可能用到(dào)該組件，所以(yǐ)我選擇從頁面傳值過來(lái)顯示提示語；
然後在(zài)prompt.js的(de)點擊事件裏指定方法名稱，該方法名稱在(zài)後面的(de)頁面調用監聽組件時(shí)需要(yào / yāo)用到(dào)；

// prompt.wxml
<view class="main" catchtouchmove="catchTouchMove">
	<view class="main-mask"></view>
	<view class="main-content">
		<view class="content-title">提示</view>
		<view class="content-text">{{txtTips}}</view>
		<button class="btn-confirm" bindtap="bindConfirm">確定</button>
	</view>
</view>

// prompt.js
Component({
  /**
   * 組件的(de)屬性列表
   */
  properties: {
    txtTips: String,//聲明屬性類型
  },

  /**
   * 組件的(de)初始數據
   */
  data: {

  },

  /**
   * 組件的(de)方法列表
   */
  methods: {
    //确認按鈕
    bindConfirm: function (e) {
      this.triggerEvent('events');
    },

    // 截獲豎向滑動--禁止底部頁面滑動
    catchTouchMove: function (res) {
      return true;
    },
  }
})

home頁面：

首先需要(yào / yāo)在(zài)home.json的(de)"usingComponents"屬性裏引入prompt組件地(dì / de)址；
然後在(zài)home.wxml中引入<prompt />組件，且綁定的(de)事件名稱要(yào / yāo)跟組件中triggerEvent方法指定的(de)名稱一緻；
完成上(shàng)面2個(gè)步驟後，我們就(jiù)可以(yǐ)在(zài)js頁面就(jiù)可以(yǐ)監聽操作組件的(de)觸發事件啦；

// home.json
{
  "usingComponents": {// 需引入自定義組件地(dì / de)址
    "prompt": "/component/prompt/prompt"
  }
}

// home.wxml
<view class="main">
  <button bindtap="bindEjectComponent">彈出(chū)自定義組件</button>
  <!-- 提示組件 -->
	<prompt txtTips="{{txtTips}}" bind:events="bindPromptConfirm" wx:if="{{isShowPromptComponent}}"/>
</view>

// home.js
Page({
  /**
 頁面的(de)初始數據
   */
  data: {
    isShowPromptComponent: false,//是(shì)否顯示提示控件組件
  },

  //點擊彈出(chū)自定義組件
  bindEjectComponent:function(e){
    var that = this;
    that.setData({
      isShowPromptComponent: true,
      txtTips:"Hi，我是(shì)自定義提示組件喔!",
    })
  },

  //提示組件确認事件
  bindPromptConfirm: function (e) {
    var that = this;
    that.setData({
      isShowPromptComponent: false,
    })
  },
})