小程序的事件绑定和SetData

目录

• 微信小程序的事件绑定
  • 如何事件绑定
    • 事件补充
• 动态渲染数据

微信小程序的事件绑定

如何事件绑定

wxml文件

<!--pages/test1/test1.wxml-->
 
<view bindtap="click1">我是事件</view>
<button bind:tap="click1" data-name="{{name}}" data-age="18" id="bt">我是按钮</button>
 
<view id="outter" bindtap="click3" data-a="o">外面
 
  <view id="innder" bindtap="click2" data-a="i">
    里面
  </view>
</view>

js文件

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    name:"owen"
  },
  //e为事件对象，事件所有产生的数据都在e中
  click1:function(e){
    console.log("你点我了"，e)
  },
  )}

总结：

1 响应函数直接写在page对象中就可以了，不需要和vue一样写在methods里面
2 <view bind:事件名称 = "响应函数的函数名" data-参数名 = "值">
3 获取2中传过来的值，在事件对象中。例如：e.currentTarget.dataset中

事件补充

bind:tap就是事件的冒泡，从里面到外面传递，点击里面的，会向外触发事件

capture-bind:tap 事件的捕获，从外面到里面，点击外面的，会向内部触发事件

js文件

// pages/test1/test1.js
 
 
Page({
  /**
   * 页面的初始数据
   */
  data: {
    name:"owen"
  },
  click1:function(e){
    console.log("你点我了",e)
  },
  click2:function(e){
    console.log("里面",e)
  },
  click3:function(e){
    console.log("外面",e)
  },
 
  click4:function(e){
    console.log("捕获外")
  },
  click5:function(e){
    console.log("捕获中")
  },
  click6:function(e){
    console.log("捕获里")
  }
  ,
  click7:function(e){
    console.log("冒泡外")
  },
  click8:function(e){
    console.log("冒泡中")
  },
  click9:function(e){
    console.log("冒泡里")
  }
})

wxml文件

 
 
<!-- capture-bind:tap 事件的捕获，从外面到里面-->
<!-- bind:tap就是事件的冒泡，重里面到外面传递 -->
<view class="outter" capture-bind:tap="click4" bind:tap="click7" data-a="o">外面
 
  <view class="midd" capture-bind:tap="click5" bind:tap="click8" data-a="i">
    <view class="innder"  capture-bind:tap="click6" bind:tap="click9">
      里面
    </view>
 
    中间
  </view>
 
</view>
 
<!-- 如何阻止事件捕获  将 capture-bind:tap改成  capture-catch:tap-->
<view class="outter" capture-bind:tap="click4" bind:tap="click7" data-a="o">外面
 
  <view class="midd" capture-catch:tap="click5" bind:tap="click8" data-a="i">
    <view class="innder"  capture-bind:tap="click6" bind:tap="click9">
      里面
    </view>
 
    中间
  </view>
 
</view>
 
 
<!-- 如何阻止事件冒泡  将bind：tap 改成 catch:tap-->
<view class="outter" capture-bind:tap="click4" bind:tap="click7" data-a="o">外面
 
  <view class="midd" capture-bind:tap="click5" bind:tap="click8" data-a="i">
    <view class="innder"  capture-bind:tap="click6" catch:tap="click9">
      里面
    </view>
 
    中间
  </view>
 
</view>

wxss文件

 
 
<!-- capture-bind:tap 事件的捕获，从外面到里面-->
<!-- bind:tap就是事件的冒泡，重里面到外面传递 -->
<view class="outter" capture-bind:tap="click4" bind:tap="click7" data-a="o">外面
 
  <view class="midd" capture-bind:tap="click5" bind:tap="click8" data-a="i">
    <view class="innder"  capture-bind:tap="click6" bind:tap="click9">
      里面
    </view>
 
    中间
  </view>
 
</view>
 
<!-- 如何阻止事件捕获  将 capture-bind:tap改成  capture-catch:tap-->
<view class="outter" capture-bind:tap="click4" bind:tap="click7" data-a="o">外面
 
  <view class="midd" capture-catch:tap="click5" bind:tap="click8" data-a="i">
    <view class="innder"  capture-bind:tap="click6" bind:tap="click9">
      里面
    </view>
 
    中间
  </view>
 
</view>
 
 
<!-- 如何阻止事件冒泡  将bind：tap 改成 catch:tap-->
<view class="outter" capture-bind:tap="click4" bind:tap="click7" data-a="o">外面
 
  <view class="midd" capture-bind:tap="click5" bind:tap="click8" data-a="i">
    <view class="innder"  capture-bind:tap="click6" catch:tap="click9">
      里面
    </view>
 
    中间
  </view>
 
</view>

动态渲染数据

利用事件绑定，去修改.js文件pages中的data数据，并实时渲染到页面，需要利用setData

作业：

// pages/test/test.js
 
  data: {
    num: 0
  },
  onclick: function(e){
    this.setData({
      num: this.data.num + 1
    })
  },

/* pages/test/test.wxss */
 
.center {
  text-align: center;
}

<!--pages/test/test.wxml-->
 
<button class="center" bindtap="onclick" data-num="{{num}}">点我试试</button>
 
<view class="center">当前被点击{{num}}次</view>

vue中的习惯是直接this.data修改数据，但在微信小程序中需要借助setData，在开发程序的时候，我们要遵循别人的规则来开发，不要被习惯所左右。