uni-app:各种事件(点击事件、回车事件...)(获取参数)

  • @tap: 单击事件
  • @confirm: 回车事件
  • @blur:失去焦点事件
  • @touchstart: 触摸开始事件
  • @touchmove: 触摸移动事件。
  • @touchend: 触摸结束事件。
  • @longpress: 长按事件。
  • @input: 输入框内容变化事件。
  • @change: 表单元素值变化事件。
  • @submit: 表单提交事件。
  • @scroll: 滚动事件。
  • @touchmove: 触摸移动事件。
  • @touchend: 触摸结束事件。
  • @input: 输入框内容变化事件。
  • @change: 表单元素值变化事件。
  • @submit: 表单提交事件。
  • @scroll: 滚动事件。
  • @scrolltoupper: 滚动到顶部事件,当滚动条滚动到顶部时触发。
  • @scrolltolower: 滚动到底部事件,当滚动条滚动到底部时触发。
  • @touchforcechange: 触摸压力变化事件,当触摸设备的压力值发生变化时触发。
  • @error: 图片加载失败事件,在图片加载失败时触发。
  • @load: 图片加载成功事件,在图片加载成功时触发。
  • @resize: 窗口尺寸变化事件,当窗口大小发生变化时触发。
  • @backbutton: 后退按钮点击事件,当用户点击后退按钮时触发。

......

部分案例 

单击事件

<template>
  <view>
    <button @tap="handleTap">点击我</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleTap() {
      console.log("单击事件");
    }
  }
};
</script>

回车事件

写法1

<template>
  <view>
    <input type="text" @confirm="handleConfirm" />
  </view>
</template>

<script>
export default {
  methods: {
    handleConfirm(event) {
      console.log('按下回车键');
      console.log('输入框的值:', event.target.value);
    }
  }
};
</script>

写法2

<template>
  <view>
    <input type="text" v-model="inputValue" @confirm="handleEnter" />
  </view>
</template>

<script>
    export default {
      data() {
        return {
          inputValue: ''
        };
      },
      methods: {
        handleEnter() {
          console.log(this.inputValue); // 输出文本框内容
      
          // 执行其他逻辑操作
      
          // 清空文本框内容
          this.inputValue = '';
        }
      }
};
</script>

失去焦点

<template>
  <view>
    <input v-model="inputValue" @blur="handleBlur" />
    <text>{{ inputValue }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleBlur() {
      console.log(this.inputValue); // 获取输入框的值
      // 处理失去焦点事件的逻辑
    }
  }
};
</script>

长按事件

<template>
  <view>
    <button @longpress="handleLongPress">长按按钮</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleLongPress() {
      // 处理长按事件的逻辑
      console.log('长按事件触发');
    }
  }
}
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值