首先我們在pages文件夾下創(chuàng)建components目錄用于存放自定義組件。如圖所示，以我創(chuàng)建的dialog組件為例，自定義組件的格式與頁面一樣，分為4個文件。

我們提供的服務有：網站設計、成都網站制作、微信公眾號開發(fā)、網站優(yōu)化、網站認證、延壽ssl等。為近1000家企事業(yè)單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的延壽網站制作公司

如上圖2所示，假如index頁面有一個按鈕觸發(fā)點擊事件后彈出dialog，并且當點擊某個部門時，將dialog關閉，并將部門名稱與紅色標題同步。

一、首先把dialog組件的樣式寫好，并在index頁面相應的位置引用。以下就是代碼啦（分別為：wxml、wxss、js、json）

 <view class='wx_dialog_container' hidden="{{!isShow}}">
 <view class='wx-mask' bindtap='close'></view>
 <view class='wx-dialog'>
 <text class='li' bindtap='groupClick' wx:for="{{items}}" data-index='{{index}}' wx:for-item="item">{{item.department}}</text> 
 </view>
 </view>

.wx_dialog_container{
 width: 100%;
 height: 100%;
 z-index: 999;
}
.wx-mask{
 position: fixed;
 z-index: 1000;
 top: 0;
 right: 0;
 left: 35%;
 bottom: 0;
 background: rgba(0, 0, 0, 0.3);
}
.wx-dialog{
 position: fixed;
 min-width: 528rpx;
 height: 100%;
 left: 0;
 top:314px;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 background-color: #FFFFFF;
 text-align:left;
}
.wx-dialog .li{
 display: block;
 font-size: 18px;
 margin-top:28px;
 margin-left:154px;
}

Component({
 properties: {
 
 },
 data: {
 isShow: false,
 animationData: {},
 color:"#000",
 items:[
 { department: '研發(fā)部'},
 { department: '設計部' },
 { department: '人事部'},
 { department: '銷售部' },
 { department: '市場運營部' },
 ]
 },

 methods: {
 show: function () {
 this.setData({
 isShow: true
 });
 },
 
 close: function () {
 this.setData({
 isShow: false
 })
 },

 // 自定義組件與頁面之間的數據通信
 groupClick: function (e){
 var group = this.data.items[e.target.dataset.index]
 console.log(group)
 // 使用 triggerEvent 方法觸發(fā)自定義組件事件，指定事件名、detail對象和事件選項
 this.triggerEvent('okEvent', { group}, {})
 
 
 this.setData({
 isShow: false

 })
 },
 
 },
})

{
 "component": true
}

網頁標題：微信小程序自定義組件的實現方法及自定義組件與頁面間的數據傳遞問題-創(chuàng)新互聯
網頁URL：http://www.yijiale78.com/article2/dissic.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站營銷、電子商務、網站排名、網站導航、手機網站建設、品牌網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯