小程序封装toastx组件

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

1.1 创建组件

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

2.1 编写组件代码

在toastx.wxml 中

<view hidden='{{ !toastText }}'>
   <view style="transition: opacity .5s;z-index: 1000;text-align: center;width: 100%;top:30%;position: fixed;padding:0;line-height: 2;opacity:{{ opacity }}">
    <text style="max-width:80%;background: rgba(0, 0, 0, 0.6);color: rgb(255, 255, 255);border-radius: 5px;display: inline-block;padding: 20rpx;font-size:30rpx">{{ toastText }}</text>
  </view> 
</view>

在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调用组件

<toastx toastText="{{toast_msg}}"></toastx>

在index.js绑定数据,

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

补充知识

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

<!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 -->
<component-tag-name bind:myevent="onMyEvent" />
<!-- 在自定义组件中 -->
<button bindtap="myevent">点击这个按钮将触发“myevent”事件</button>
//js部分
Component({
  properties: {}
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})