EVENT解析

aotoo-hub基于最小化模板使用的设计方案,大量碎片化的模板设计不利于工程化及后期展开维护,这一点更靠近react的设计方向。我们将小程序的事件方法从模板中剥离到配置文件中

ITEM支持的事件属性

参数 类型 对应方法 descript
tap {String} bind:tap 点击事件
catchtap {String} catch:tap 阻止冒泡tap
longpress {String} bind:longpress 长按
catchlongpress {String} catch:longpress 阻止冒泡长按
touchstart {String} bind:touchstart touch事件
touchmove {String} bind:touchmove touch事件
touchend {String} bind:touchend touch事件
catchtouchstart {String} bind:touchstart touch事件
catchtouchmove {String} bind:touchmove touch事件
catchtouchend {String} bind:touchend touch事件

aim

aim事件是catchtap的简写别名

item: {
  title: '标题',
  aim: 'mytap'
}

Pager会自动转义aim为catchtap并作用于模板,最终形成catch:tap事件

简单事件示例

数据部分

Pager({
  data: {
    aitem: {title: '标题a'
      tap: 'mytap?title=a'
    },
    bitem: {title: '标题b',
      aim: 'mytap?title=b'
    }
  }
})

模板部分

<ui-item item="{{aitem}}">

<ui-item item="{{bitem}}">

响应

Pager({
  mytap: function(event, param, inst){
    let title = param.title
    if (title === 'a') {
      inst.update({title: '修改后的标题a'})
    }
  }
})

事件重新封装

允许带参事件

{tap: 'mytap?title=b'}

丰富事件响应方法

mytap: function(event, param, inst){
  .....
}
  1. event 小程序原生event的透传,不串改小程序原有逻辑
  2. param 接收事件触发传递的query参数
  3. inst 事件触发源对象,方便追溯修改

事件提取

为解决复杂结构,交互的页面需求,我们需要拆解结构和数据及事件响应方法

let aitem = Pager.item({
  title: '标题',
  tap: 'mytap',
  methods: {
    mytap(e, param, inst){
      ......
    }
  }
})

let alist = Pager.list({
  data: [
    { title: '标题', tap: 'mytap?title=a' },
    { title: '标题1', tap: 'mytap?title=b' },
  ],
  methods: {
    mytap(e, param, inst){
      ......
    }
  }
})

Pager({
  data: {
    aitem,
    alist
  }
})

上例中,我们把数据和事件响应方法从Pager中剥离出来,由item/list组件作为事件主体