微信小程序开发初学：自定义事件函数及setData使用_小程序 data 定义函数

事件使用方式

在组件中绑定一个事件处理函数。

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

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

如

<!-- wxml文件 -->
<view bindtap="myTap" data-title="LZH" data-id="12334" data-back-color="BLUE">
 {{backColor}}
</view> 
<!--bindtap="事件名"   data-xxx=" "向后端传递数据，
xxx为自定义变量名，其中若出现短横线-，会把横线后面一个字母变为大写，存在后端res中，
-->
1
2
3
4
5
6
7

// js文件
myTap:function(res){ //事件函数中每条语句末尾不加任何符号，否则报错
       var color = res.currentTarget.dataset.backColor
       // 获取我们存入后端中的数据backColor
       // js中定义变量语法 var 变量名 = 变量值
       this.setData({
           backColor:color
           //将backColor存入data中
       })
    },
1
2
3
4
5
6
7
8
9
10

冒泡事件列表
touchstart：手指触摸开始
touchmove：手指触摸后移动
touchcancel：手指触摸动作被打断，如来电，弹窗
touchend：手指触摸结束
tap：点击（手指触摸后马上离开）

setData使用

this.setData({
    变量名1：变量值1,
    变量名2: 变量值2
})
// setData可以对Data中的变量进行赋值及初始化，常用于事件函数中
1
2
3
4
5

下面以一个计数器为例进行自定义函数及satData的应用

要求是设计一个可以进行分数增减的分数显示器，包含两个按钮：分数+1和分数-1

<!-- wxml文件 -->

<view class="View">
    <view class="num2-view">{{num2}}</view>
    <!--十位-->
    <view class="num1-view">{{num1}}</view>
    <!--个位-->
</view>

<view class="btnView">
    <button class="btn" type="warn"    size="mini" bindtap="reduceTap"  >分数-1</button>
    <button class="btn" type="primary" size="mini" bindtap="increaseTap">分数+1</button>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13

/* css文件 */

.num1-view{ /*个位*/
    width: 180px; height: 300px;
    background: pink;
    font-size: 250px;
    display: flex; justify-content: center; align-items: center; 
    /*设置文字居中*/

    margin-left: 30px;
}

.num2-view{ /*十位*/
    width: 180px; height: 300px;
    background: pink;
    font-size: 250px;
    display: flex; justify-content: center; align-items: center; 
    /*设置文字居中*/
}

.View{
    display: flex; justify-content: center;
    margin-top: 30px;
    
}

.btnView{
    display: flex;
    justify-content: center;
}

.btn{
    margin-top: 30px;
}
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

// page({ })中的主要函数，此处未包含生命周期函数

//初始数据
data: {   
        Num:0,  //计数器数值
        num1:0, //个位
        num2:0  //十位
    },
    
//分数+1事件函数
increaseTap:function(){
        var Numf = this.data.Num
        Numf++
        
        var n2 = Math.floor(Numf/10) //计算十位
        //此处用到Javascript中 Math类的向下整数用法 floor(a/b)
        //向下整除：Math.ceil(a/b)
        var n1 = Numf-n2*10          //计算个位
        
        this.setData({
            Num:Numf, //Num需要用setData重新赋值，否则会导致Num=1后不再增加
            num1:n1,
            num2:n2
        })
    },
    
//分数-1事件函数
reduceTap:function(){
        var Numf = this.data.Num
        Numf--
        var n2 = Math.floor(Numf/10)
        var n1 = Numf-n2*10
        this.setData({
            Num:Numf,
            num1:n1,
            num2:n2
        })
    },
    
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
36
37
38
39