[Wondgirl] 入门系列教程《三》模板的使用、事件

在上篇文章的基础上,我们新建一个模版目录templates, 
在里面创建一个头部模板header.wxml和一个底部模板footer.wxml.

header.wxml:

<text>
头部
</text>

• 1
• 2
• 3

• 1
• 2
• 3

footer.wxml:

<template name="footer1">
底部1
{{text}}
</template>

<template name="footer2">
底部2
</template>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

在first.wxml里引用头部模板

<include src="../templates/header"/>

• 1

• 1

在first.wxml里引用底部模板

<import src="../templates/footer" />
<template is="footer1" data="{{text:'导入设置的内容...'}}"/>

• 1
• 2

• 1
• 2

运行结果如下: 

 

二：事件

官方解释什么是事件

事件是视图层到逻辑层的通讯方式。  事件可以将用户的行为反馈到逻辑层进行处理。  事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。  事件对象可以携带额外信息，如 id, dataset, touches。

事件分类

事件分为冒泡事件和非冒泡事件：

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。点击事件,长按事件和触摸事件都属于冒泡事件.  分别是:  点击事件:tap,  长按事件longtap,  触摸事件touchstart,touchend,touchmove,touchcancel.  非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。如其他事件submit,input.

事件类型:

类型 触发条件  touchstart 手指触摸动作开始  touchmove 手指触摸后移动  touchcancel 手指触摸动作被打断，如来电提醒，弹窗  touchend 手指触摸动作结束  tap 手指触摸后马上离开  longtap 手指触摸后，超过350ms再离开

新建项目:

一.新建一个view1,在view1里面在建一个view2,在view2里面在建一个view3.它们分别绑定自己的样式(class=”view1”)和自己的单击事件(bindtap=”view1click”).

<!--index.wxml-->
<view class="view1" bindtap="view1click">
view1
  <view  class="view2" bindtap="view2click">
  view2
    <view  class="view3" bindtap="view3click">
      view3   
    </view>
  </view>

</view>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

/**index.wxss**/
.view1{
  height: 500rpx;
  width:100%;
  background-color: rebeccapurple;
}

.view2{
  height: 400rpx;
  width:80%;
  background-color: red;
}

.view3{
  height: 300rpx;
  width:60%;
  background-color: pink;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  view1click:function(){
    console.log("vlew1click")
  },
  view2click:function(){
    console.log("vlew2click")
  },
  view3click:function(){
    console.log("vlew3click")
  },
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35

编译后我们点击view3时会发现先打印了view3的log,又打印了view2的log.再打印了view1的log.这就是冒泡事件,先触发自己的点击事件,又触发了父视图的点击事件,接着再触发父视图的父视图的触发事件.

事件的绑定:bind和catch绑定事件的区别

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。  如果把上例中的view3的bind事件绑定改为了catch事件绑定.

<view  class="view3" catchtap="view3click">
      view3   
</view>

• 1
• 2
• 3

• 1
• 2
• 3

编绎后再点击view3后将只能打印出view3的log,则不会向上冒泡打印view2和view1的log了.

事件的对像

target:触发事件的源组件。  currentTarget:事件绑定的当前组件

例:

<!--index.wxml-->
<view class="view1" bindtap="view1click" id="view1" data-title="标题1" data-id="100">
view1
  <view  class="view2" bindtap="view2click" id="view2">
  view2
    <view  class="view3" bindtap="view3click" id="view3">
      view3   
    </view>
  </view>

</view>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

我们把view1和view3的事件处理函数改为如下.

//index.js

  //事件处理函数
  view1click:function(event){
    console.log("vlew1click")
    console.log(event)
  },
  view2click:function(){
    console.log("vlew2click")
  },
  view3click:function(event){
    console.log("vlew3click")
    console.log(event)
  },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

编译后我们点击一下view3看一下log.  view3的log 

view1的log 

我们可以看见,view3的target触发事件和currentTarget事件绑定的组件都是view3.而view1的target触发事件的组件是view3而currentTarget事件绑定的组件都是它本身view1.还可以看见view1的dataset里有我们设置的data-title和data-id.