前端【小程序】10-小程序基础篇【事件对象】【组件事件【scroll-view】、【form表单快速收集表单数据】】

事件处理

事件对象

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

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

index.wxml

<!-- 搜索框 -->
<view class="search-bar">
  <input type="text" placeholder="输入搜索关键字" />
</view>
<!-- 页面主体 -->
<view class="page-body">
  <scroll-view     scroll-y class="aside">
    <!-- 通过bind:tap="onChangeTab"绑定事件, 事件名称为onChangeTab, 通过自定义属性传参，然后js中通过事件对象e.target拿对应的值 -->
    <!-- <view class="item" bind:tap="onChangeTab" data-index="{{ 0 }}"></view> -->

    <!-- 通过 mark:index="{{ 0 }}" 传参，然后js中的方法通过第一个参数事件对象e.mark.index  拿到传的这个0-->
    <!-- <view class="item" bind:tap="onChangeTab" mark:index="{{ 0 }}"></view> -->

    <view  class="item {{activeIndex === item ? 'active' : ''}}"  // 如果activeIndex与当前item的下标一致，就添加active类名，让其高亮显示
      bind:tap="onChangeTab" 
      mark:index="{{ index }}" 
      wx:for="{{ 4 }}" 
      wx:key="*this"
    >
      {{ item }}
    </view>
  </scroll-view>
  <scroll-view     scroll-y  class="content">
    <view class="item" wx:for="{{10}}" wx:key="*this"    bind:scrolltolower="onScrolltolower"></view>
  </scroll-view>
</view>

index.wxss

/* pages/events/index.wxss */
page {
  padding: 0;
}

.search-bar {
  padding: 20rpx 30rpx;
  background-color:#fff;
}

.search-bar input {
  padding-left: 40rpx;
  border: 1rpx solid #eee;
  border-radius: 70rpx;
  font-size: 28rpx;
  color: #333;
}

.page-body {
  height: 420rpx;
  display: flex;
  margin-top: 20rpx;
}

.page-body .aside {
  width: 200rpx;
  padding: 20rpx;
  background-color: #fff;
}

.page-body .aside .item {
  height: 60rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  background-color: #eee
}

.page-body .aside .active {
  background-color: pink;
}

.page-body .content {
  flex: 1;
  padding: 20rpx;
  margin-left: 20rpx;
  background-color: #fff;
}

.page-body .content .item {
  float: left;
  width: 215rpx;
  height: 215rpx;
  margin: 0 20rpx 20rpx 0;
  border-radius: 10rpx;
  background-color: #eee;
}

.page-body .content .item:nth-child(even) {
  margin-right: 0;
}

.register {
  margin-top: 20rpx;
}

.register .form-field {
  display: flex;
  padding: 0 40rpx;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #fff;
  color: #333;
}

.register .form-field label {
  width: 120rpx;
}

.register .form-field .field {
  flex: 1;
}

.register .form-field input {
  height: 60rpx;
  border: none;
}

.register button {
  display: block;
  height: 72rpx;
  line-height: 72rpx;
  margin: 20rpx 40rpx 0;
}

index.js

Page({
  data:{
    activeIndex:0
  },
  onScrolltolower(){
     console.log('滚动触底了');
  },
  onChangeTab(e) {
    // console.log(e.target.dataset.index);   // data-index 传参的时候，获取自定义参数的方式
    // console.log(e.mark.index);   // mark:index 传参的时候，获取自定义参数的方式
    const { index } = e.mark
    console.log(index);
     // 保存当前点击的下标，用于高亮
    this.setData({
      activeIndex:index
    })
  }
})

 

组件事件

　　前面介绍的 tap 事件可以在绝大部分组件是监听，我们可以将其理解为通用事件类型，然而也有事件类型只属于某个组件，我们将其称为组件事件。

scroll-view 组件中的事件

• bind:scrolltolower 当滚动内容到达底部或最右侧时触发
• refresher-enable 启用自定义下拉刷新
• bind:refresherrefresh 执行下拉操作时触发

<view class="page-body">
  <scroll-view     
    scroll-y                                    // 允许Y轴滚动
    class="content"
    refresher-enabled                           // 允许下拉
    bind:refresherrefresh="onRefresherrefresh"  // 绑定下拉刷新的时候触发事件，onRefresherrefresh
    refresher-triggered="{{ isTriggered }}"     // 触发下拉，根据变量isTriggered
    bind:scrolltolower="onScrolltolower"        // 绑定触底或者触右时触发的事件
  >
    <view class="item" wx:for="{{10}}" wx:key="*this"></view>
  </scroll-view>
</view>

Page({
  data: {
    isTriggered: false
  },
  onRefresherrefresh () {
    console.log('下拉时触发')
    // 设置下拉状态为true
    this.setData({
      isTriggered: true
    })

    // 延迟1秒关闭下拉状态
    setTimeout(() => {
      this.setData({
        isTriggered: false
      })
    }, 1000)
  },

  onScrolltolower () {
    console.log('滚动触底了')
  }
})

表单组件中的事件

　　文档：https://developers.weixin.qq.com/miniprogram/dev/component/form.html
　　当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

• change 表单数据发生改变时触发，事件对象中收集数据
• input 和 textarea 用双向绑定，底层通过 bind:input 和 value 实现
• submit 表单提交时触发，button 按钮必须指定 form-type 属性

<!-- 用户信息 -->
<view class="register">
  <form bind:submit="onSubmit">  // 1、表单绑定onSubmit事件
    <view class="form-field">
      <label for="">姓名:</label>
      <view class="field">
        <input name="username" type="text" placeholder="请输入您的姓名" />   // 2、给表单组件添加name属性，用于表单收集时的key
      </view>
    </view>
    // 3、button必须添加form-type属性， 点击保存按钮的时候,触发表单的onSubmit事件，通过e.detail.value 拿到整个表单的数据
    <button form-type="submit" size="mini" type="primary">保存</button>
  </form>
</view>

Page({
  onSubmit (e) {
    console.log(e.detail)
    console.log(e.detail.value) // 表单中所有有name属性的表单数据
  }
})