微信小程序实战学习——小程序事件

小半 • 2022年5月21日下午2:23 • 后端开发 • 阅读 142

一、基本事件

<!-- 基本的事件使用 通过给组件添加一个 "bind+事件名" 的属性，属性的值指向一个定义在当前页面对象中JS方法" -->
  <button bindtap="buttonTapHandler">点击按钮</button>

在相应的jd文件中写下相应的响应的事件效果：

1.事件冒泡

<!-- 事件冒泡 -->
  <view bindtap="outerHandler" style="width:200px; height:200px; background-color:red">
    <view catchtap="innerHandler" style="width:100px; height:100px; background-     color:blue"></view>
    <!-- catch+事件名 是绑定事件并阻止冒泡 -->
  </view>

点击蓝色view执行效果：

二、事件传参（data-）

<button bindtap="buttonTapHandler2" data-name="张三">传参按钮</button>
  
  <!-- 
    1.事件的基本使用  bind[xxx] catch[xxx]
    2.小程序中事件冒泡和HTML中处理不一样 这里使用catch[xxx]
    3.如果需要给事件处理函数传递参数只能通过dataset方式
   -->

三、单向数据流以及事件方式绑定

<view>
  <input class="dataBindInput" value="{{dataBind}}" bindinput="bindDataHandler"></input>
  <text>{{dataBind}}</text>
 </view>

1.抽象共同的事件处理函数

案例：使用input绑定的方式实现表单的提交

<view class="container">
  <view class="inputs">
    <input class="username" placeholder="请输入账号" value="{{username}}" bindinput="inputChangeHandler" data-prop="username"/>
    <input class="password"  type="password" placeholder="请输入密码" value="{{password}}" data-prop="password" bindinput="inputChangeHandler"></input>
  </view>
  <view class="buttons">
    <button type="primary" bindtap="loginHandler">登录</button>
  </view>
</view>

js控制：

使用form表单的方式实现表单提交的登录

在js中获取值处理：

Page({
  data: {
    username: "",
    password: ""
  },
  //用于处理表单提交事件
  loginHandler: function (e) {
    //1.先需要知道用户的输入值
    console.log(e.detail)
    //2.根据用户输入的值判断
    //3.根据判断的结果做出响应
  }
})

展示效果：