AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:02:47

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:[Wondgirl] 入门系列教程《三》模板的使用、事件
相关的资讯,希望对您有帮助。

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

原文地址一:模板的使用在上篇文章的基础上,我们新建一个模版目录templates,在里面创建一个头部模板header.wxml和一个底部模板footer.wxml.header.wxml:text 头部 /text123123footer.wxml:template name=footer1 ...

原文地址
一:模板的使用

在上篇文章的基础上,我们新建一个模版目录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”).


<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:事件绑定的当前组件

例:


<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.


72阅读 | 0评论
你的回应