事件处理

事件对象

　　前面已经介绍过小程序事件监听的语法：bind:事件类型=事件回调，但是小程序的事件回调不支持传参数，因此要将模板中的数据传递到事件回调中就必须要通过事件对象来实现。

　　小程序事件回调函数的第 1 个参数即为事件对象，事件对象中包括了一些有用的信息：

index.wxml

 1 <!-- 搜索框 -->
 2 <view class="search-bar">
 3   <input type="text" placeholder="输入搜索关键字" />
 4 </view>
 5 <!-- 页面主体 -->
 6 <view class="page-body">
 7   <scroll-view     scroll-y class="aside">
 8     <!-- 通过bind:tap="onChangeTab"绑定事件, 事件名称为onChangeTab, 通过自定义属性传参，然后js中通过事件对象e.target拿对应的值 -->
 9     <!-- <view class="item" bind:tap="onChangeTab" data-index="{{ 0 }}"></view> -->
10 
11     <!-- 通过 mark:index="{{ 0 }}" 传参，然后js中的方法通过第一个参数事件对象e.mark.index  拿到传的这个0-->
12     <!-- <view class="item" bind:tap="onChangeTab" mark:index="{{ 0 }}"></view> -->
13 
14     <view  class="item {{activeIndex === item ? 'active' : ''}}"  // 如果activeIndex与当前item的下标一致，就添加active类名，让其高亮显示
16       bind:tap="onChangeTab" 
17       mark:index="{{ index }}" 
18       wx:for="{{ 4 }}" 
19       wx:key="*this"
20     >
21       {{ item }}
22     </view>
23   </scroll-view>
24   <scroll-view     scroll-y  class="content">
25     <view class="item" wx:for="{{10}}" wx:key="*this"    bind:scrolltolower="onScrolltolower"></view>
26   </scroll-view>
27 </view>

index.wxss

 1 /* pages/events/index.wxss */
 2 page {
 3   padding: 0;
 4 }
 5 
 6 .search-bar {
 7   padding: 20rpx 30rpx;
 8   background-color:#fff;
 9 }
10 
11 .search-bar input {
12   padding-left: 40rpx;
13   border: 1rpx solid #eee;
14   border-radius: 70rpx;
15   font-size: 28rpx;
16   color: #333;
17 }
18 
19 .page-body {
20   height: 420rpx;
21   display: flex;
22   margin-top: 20rpx;
23 }
24 
25 .page-body .aside {
26   width: 200rpx;
27   padding: 20rpx;
28   background-color: #fff;
29 }
30 
31 .page-body .aside .item {
32   height: 60rpx;
33   margin-bottom: 20rpx;
34   border-radius: 10rpx;
35   background-color: #eee
36 }
37 
38 .page-body .aside .active {
39   background-color: pink;
40 }
41 
42 .page-body .content {
43   flex: 1;
44   padding: 20rpx;
45   margin-left: 20rpx;
46   background-color: #fff;
47 }
48 
49 .page-body .content .item {
50   float: left;
51   width: 215rpx;
52   height: 215rpx;
53   margin: 0 20rpx 20rpx 0;
54   border-radius: 10rpx;
55   background-color: #eee;
56 }
57 
58 .page-body .content .item:nth-child(even) {
59   margin-right: 0;
60 }
61 
62 .register {
63   margin-top: 20rpx;
64 }
65 
66 .register .form-field {
67   display: flex;
68   padding: 0 40rpx;
69   height: 88rpx;
70   line-height: 88rpx;
71   background-color: #fff;
72   color: #333;
73 }
74 
75 .register .form-field label {
76   width: 120rpx;
77 }
78 
79 .register .form-field .field {
80   flex: 1;
81 }
82 
83 .register .form-field input {
84   height: 60rpx;
85   border: none;
86 }
87 
88 .register button {
89   display: block;
90   height: 72rpx;
91   line-height: 72rpx;
92   margin: 20rpx 40rpx 0;
93 }

index.js

 1 Page({
 2   data:{
 3     activeIndex:0
 4   },
 5   onScrolltolower(){
 6      console.log('滚动触底了');
 7   },
 8   onChangeTab(e) {
 9     // console.log(e.target.dataset.index);   // data-index 传参的时候，获取自定义参数的方式
11     // console.log(e.mark.index);   // mark:index 传参的时候，获取自定义参数的方式
12     const { index } = e.mark
13     console.log(index);
14      // 保存当前点击的下标，用于高亮
15     this.setData({
16       activeIndex:index
17     })
18   }
19 })