自定义组件

• 创建自定义组件

// 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)
    }
})