// json文件中铐然，聲明這是一個組件
{
"component": true
}
// wxml文件中隆判，定義組件結(jié)構(gòu)
<view class='tip' hidden='{{ishide}}'>
<text class='txt'>{{message}}</text>
<text class='close' bindtap='onclose'>關(guān)閉</text>
</view>
// wxss文件中幌墓，定義組件樣式
.tip{
width: 750rpx;
height: 80rpx;
background-color: #efefef
}
.txt{
display: block;
width: 100%;
line-height: 80rpx;
text-align: center;
font-size: 32rpx;
}
// js文件中，定義邏輯和自定義事件
Component({
data: {
message: "這是一個提示條",
ishide: false
},
methods: {
hide: function(value) {
this.setData({
ishide: value
})
},
setMessage:function(value){
this.setData({
message: value,
})
},
onclose: function() {
this.setData({
ishide: true
});
//自定義事件
this.triggerEvent("tipclose", "提示條關(guān)閉事件")
}
}
})
/* 頁面json文件中引入組件
{
"usingComponents": {
"tip":"/pages/tip/tip"
}
}
/* 頁面wxml文件中插入組件標(biāo)簽
<tip id="tip" bind:tipclose="onEvent" message="顯示的賦值"></tip>
/* 頁面js文件中操控組件
Page({
onReady: function() {
this.tip = this.selectComponent("#tip");
this.tip.setMessage("我使用了提示條組件");
},
onEvent:function(e){
console.log(e.detail)
}
})
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
