收藏
评论

小程序自定义事件

事件的作用:


事件可用于不同页面间的数据交互,例如A页面监听了名为“test”的事件,当事件发生时改变页面标题。

B页面,比如点击某个按钮触发并广播了“test”事件。此时A页面的标题将改变。


实现:


-- 在app.js 中定义事件


  eventArr: [], // 事件数组 ,用于存储事件



  addEventListener: function (eventName, cb) { // 注册自定义事件

    var len = this.eventArr.length

    if (len < 1) {

      this.eventArr.push({ eventName: eventName, cbArray: [{ callback: cb }] })

    } else {

      for (var i = 0; i < len; i++) {

        if (this.eventArr[i].eventName == eventName) {

          this.eventArr[i].cbArray.push({ callback: cb })

          return

        }

      }

      this.eventArr.push({ eventName: eventName, cbArray: [{ callback: cb }] })


    }

  },


  sendEvent: function (eventName, paramObj) { // 触发事件

    var len = this.eventArr.length

    for (var i = 0; i < len; i++) {

      if (this.eventArr[i].eventName == eventName) {

        var pa = paramObj || {}

        for (var j = 0; j < this.eventArr[i].cbArray.length; j++) {

          this.eventArr[i].cbArray[j].callback(pa)

        }

        break

      }

    }

  },


  removeEvent: function (eventName) { // 移除事件

    var len = this.eventArr.length

    for (var i = 0; i < len; i++) {

      if (this.eventArr[i].eventName == eventName) {

        this.eventArr.splice(i, 1)

        break

      }

    }

  }



-- 在其他任意页面监听事件(建议在onLoad中监听)


app.addEventListener('test',function(res){

// 收到事件后的处理逻辑,res为sendEvent的第二个参数

}.bind(this))



-- 触发事件


app.sendEvent('test',{title:'xiapu'})


最后一次编辑于  2019-02-13
收藏
登录 后发表内容