// json文件中，声明这是一个组件
{
"component": true
}
// wxml文件中，定义组件结构
<view class='tip' hidden='{{ishide}}'>
<text class='txt'>{{message}}</text>
<text class='close' bindtap='onclose'>关闭</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", "提示条关闭事件")
}
}
})
/* 页面json文件中引入组件
{
"usingComponents": {
"tip":"/pages/tip/tip"
}
}
/* 页面wxml文件中插入组件标签
<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)
}
})
