小程序封装toastx组件

自定义我把它分为简单的三个步骤, 1.创建组件 --- 2.编写组件 --- 3.调用,使用组件.

1.1 创建组件

首先创建一个components文件夹，然后在该文件夹中创建一个toastx文件夹,里面包含 json.wxml.wcss.js 四个文件,然后在json里面添加 "component":true (作用是声明这一组文件为自定义组件)

2.1 编写组件代码

在toastx.wxml 中

在toastx.js中

Component({
  properties:{
    toastText:{
      type:String,
      value:'',
      observer:function(n_v,o_v){//observer 表示属性值被更改时的响应函数
        if(n_v){
          var that = this;
          setTimeout(function(){
            that.setData({
              opacity: 1
            });
          },10);
          setTimeout(function(){
            that.setData({
              opacity:0,
            });
            setTimeout(function () {
              that.setData({
                toastText: ''
              });
            },500);
          },1500);
          
        }
      }
    }
  },
  data:{
    opacity:0
  }

});

3.1

使用组件,我是在 pages/index/index 页面调用 pages/modal/modal 自定义组件 首先在index.json中进行引用说明, 这里是设置自定义组件的标签名和引用路径

{
  "usingComponents": {
    "toastx": "/components/toast/toast"
  }
}

然后在index.wxml调用组件

在index.js绑定数据,

Page({  
  data: {  
    toast_msg: '',
  }  
})

补充知识

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：

点击这个按钮将触发“myevent”事件
//js部分
Component({
  properties: {}
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})