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

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

如上圖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
 })
 },

 // 自定義組件與頁面之間的數(shù)據(jù)通信
 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
}

網(wǎng)頁標題：微信小程序自定義組件的實現(xiàn)方法及自定義組件與頁面間的數(shù)據(jù)傳遞問題-創(chuàng)新互聯(lián)
網(wǎng)頁URL：http://m.newbst.com/article2/dissic.html

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

廣告

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