微信小程序中的事件绑定

前言：

微信小程序中的事件绑定和Vue中的事件绑定其实有很多的相似之处，所以如果有过Vue相关的经验，学起来的话还是比较容易的。

 

js代码:

// 页面级的js文件必须调用Page函数来注册页面，
// 否则你的页面将无法正常渲染

Page({
  parent() {
    console.log('parent')
  },
  father() {
    console.log('father')
  },
  son() {
    console.log('son')
  }
})

 

wxss代码: (也就是对应的样式)

.parent{
  width: 500rpx;
  height: 500rpx;
  background-color: red;
  margin-bottom: 20rpx;
}

.father{
  width: 300rpx;
  height: 300rpx;
  background-color: pink;
}

.son{
  width: 100rpx;
  height: 100rpx;
  background-color: yellow;
}

 

wxml代码：

<view class="parent" bind:tap="parent">
  <view class="father" bind:tap="father">
    <view class="son" bind:tap="son">view>
  view>
view>


<view class="parent" catch:tap="parent">
  <view class="father" catch:tap="father">
    <view class="son" catch:tap="son">view>
  view>
view>


<view class="parent" capture-bind:tap="parent">
  <view class="father" capture-bind:tap="father">
    <view class="son" capture-bind:tap="son">view>
  view>
view>



<view class="parent" capture-catch:tap="parent">
  <view class="father" capture-catch:tap="father">
    <view class="son" capture-catch:tap="son">view>
  view>
view>


<view class="parent" mut-bind:tap="parent">
  <view class="father" mut-bind:tap="father">
    <view class="son" mut-bind:tap="son">view>
  view>
view>

 

总结：

• 一般开发中的话用的比较多的是前两种
• 如果会Vue中的指令的话，入手会很快