溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關微信小程序如何實現一個頁面監聽自定義組件的觸發事件，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
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組件地址；
2.然后在home.wxml中引入<prompt />組件，且綁定的事件名稱要跟組件中triggerEvent方法指定的名稱一致；
3.完成上面2個步驟后，我們就可以在js頁面就可以監聽操作組件的觸發事件啦；
// 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,
})
},
})關于微信小程序如何實現一個頁面監聽自定義組件的觸發事件就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
