微信小程式實現頁面監聽自定義元件的觸發事件，供大家參考，具體內容如下

需求：在微信小程式開發過程中，頁面通常會用到提示彈框。這時為了減少程式碼量及程式碼可拓展性，我們自定義一個提示元件是必不可少的了。那麼問題來了，頁面如何監聽到元件的觸發事件呢？
下面給大家詳細講解頁面如何監聽自定義元件的觸發事件。

prompt元件：

1.首先搭建提示元件ui。由於後面各個頁面都有可能用到該元件，所以我選擇從頁面傳值過來顯示提示語；
2.然後在prompt.js的點選事件裡指定方法名稱，該方法名稱在後面的頁面呼叫監聽元件時需要用到；

// 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({
 /**
 * 元件的屬性列表
 */
 properties: {
 txtTips: String,//宣告屬性型別
 },/**
 * 元件的初始資料
 */
 data: {

 },/**
 * 元件的方法列表
 */
 methods: {
 //確認按鈕
 bindConfirm: function (e) {
  this.triggerEvent('events');
 },// 截獲豎向滑動--禁止底部頁面滑動
 catchTouchMove: function (res) {
  return true;
 },}
})

home頁面：

1.首先需要在home.json的"usingComponents"屬性裡引入prompt元件地址；

// home.json
{
 "usingComponents": {// 需引入自定義元件地址
 "prompt": "/component/prompt/prompt"
 }
}

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

// home.js
Page({
 /**
 頁面的初始資料
 */
 data: {
 isShowPromptComponent: false,//是否顯示提示控制元件元件
 },//點選彈出自定義元件
 bindEjectComponent:function(e){
 var that = this;
 that.setData({
  isShowPromptComponent: true,txtTips:"Hi，我是自定義提示元件喔!",})
 },//提示元件確認事件
 bindPromptConfirm: function (e) {
 var that = this;
 that.setData({
  isShowPromptComponent: false,})

看到這裡‘頁面監聽元件觸發事件'功能就實現啦！！！最後上演示視訊，看看效果:

為大家推薦現在關注度比較高的微信小程式教程一篇：《微信小程式開發教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。