微信小程序（10）：事件处理及数据交互

- 日理万妓 2023-01-04 13:24 140阅读 0赞

#### 1. bindtap ####

index.wxml文件代码：

index.wxss文件代码：

.box{ 
      width: 200rpx;
      height: 200rpx;
      background-color: pink;
    }

index.js文件代码：

Page({ 
    
      /** * 页面的初始数据 */
      data: { 
        num:1
      },
      yunsuan:function(){ 
        var newNum = this.data.num;
        newNum++;
        this.setData({ 
          num:newNum
        })
        console.log(newNum);
      },
    
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
        
      },
    
      /** * 生命周期函数--监听页面初次渲染完成 */
      onReady: function () { 
        
      },
    
      /** * 生命周期函数--监听页面显示 */
      onShow: function () { 
        
      },
    
      /** * 生命周期函数--监听页面隐藏 */
      onHide: function () { 
        
      },
    
      /** * 生命周期函数--监听页面卸载 */
      onUnload: function () { 
        
      },
    
      /** * 页面相关事件处理函数--监听用户下拉动作 */
      onPullDownRefresh: function () { 
        
      },
    
      /** * 页面上拉触底事件的处理函数 */
      onReachBottom: function () { 
        
      },
    
      /** * 用户点击右上角分享 */
      onShareAppMessage: function () { 
        
      }
    })

重点在下图所示部分：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]  
效果图如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]  
每次点击都会做+1运算  
![在这里插入图片描述][20210110112609845.png]

#### 2. bindtouchmove ####

如果上述示例中的 index.wxml 文件改成下述代码，则滑动时数字进行+1运算。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20221119/57d98cc59b7c4937a2bfd99f09e316ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210110112545719.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[20210110112609845.png]: https://img-blog.csdnimg.cn/20210110112609845.png