在uniapp中，绑定事件主要是通过@符号来实现的。uniapp是一个使用Vue.js开发所有前端应用的框架，它允许你编写一次代码，然后发布到iOS、Android、Web（响应式）、以及各种小程序等多个平台。因此，它在事件处理上遵循Vue.js的事件绑定语法。

在uniapp中，你可以直接在模板中通过@符号后跟事件名来绑定事件处理器。如果你想要在用户点击按钮时执行某个方法，低代码可视化Uniapp点击事件设置你可以这样做：

定义方法

点击左上角页面API及方法，找到页面方法，新增方法。我们这里做了个一调试的例子。

调用方法

找到要设置点击方法的地方，点击事件，配置你想要的事件方法。

事件修饰符

uniapp也支持事件修饰符，这些修饰符可以附加在事件名后，用于指示一些特殊的行为。例如，.stop修饰符可以阻止事件冒泡。

跳转页面

实际应用中可能不单是调用方法也可以是跳转页面。只需要在跳转页面中选择你要跳转的页面，点击即可。当然有些附加参数我们会用另外一个章节来说明。

自定义事件

由于系统工具自带的方法可能不能满足的你的要求，那你可能通过自定义点击事件代码来处理。

点击打开窗口组件

首页我们先拖入弹窗组件进设计区，当点击事件打开弹窗交互事件即可以操作。

查看源码

点击查看源码或者保存源码至本地，可以看见点击事件效果。

点击事件除了以上常规的几个，我们还会分章节讲解传参、调用API等专量。

生成源码

<template><view class="container container329152"><u-form-item class="diygw-col-24" label="标题" prop="title"><u-input :focus="titleFocus" placeholder="请输入提示信息" v-model="title"></u-input></u-form-item><text class="diygw-col-24 text-clz">{{ title }}</text><button @tap.stop="navigateTo" data-type="openmodal" data-id="modal" class="diygw-col-24 btn-clz diygw-btn-default">调用方法</button><view @touchmove.stop.prevent="" v-if="modal" class="diygw-modal basic" :class="modal" style="z-index: 1000000"><view class="diygw-dialog diygw-dialog-modal basis-lg"><view class="justify-end diygw-bar"><view class="content"> 窗口标题 </view><view class="action" data-type="closemodal" data-id="modal" @tap="navigateTo"><text class="diy-icon-close"></text></view></view><view> </view><view class="flex justify-end"><button class="diygw-btn green flex1 margin-xs">按钮</button></view></view></view><view class="clearfix"></view></view>
</template><script>export default {data() {return {//用户全局信息userInfo: {},//页面传参globalOption: {},//自定义全局变量globalData: {},titleFocus: false,title: '',modal: ''};},onShow() {this.setCurrentPage(this);},onLoad(option) {this.setCurrentPage(this);if (option) {this.setData({globalOption: this.getOption(option)});}this.init();},methods: {async init() {},// 调用方法 自定义方法async clickFunction(param) {let thiz = this;console.log(this.title);}}};
</script><style lang="scss" scoped>.text-clz {padding-top: 10rpx;font-weight: bold;padding-left: 30rpx;font-size: 30rpx !important;padding-bottom: 10rpx;padding-right: 30rpx;}.btn-clz {padding-top: 20rpx;border-bottom-left-radius: 120rpx;color: #fff;padding-left: 20rpx;padding-bottom: 20rpx;border-top-right-radius: 120rpx;margin-right: 30rpx;background-color: #07c160;margin-left: 30rpx;overflow: hidden;width: calc(100% - 30rpx - 30rpx) !important;border-top-left-radius: 120rpx;margin-top: 30rpx;border-bottom-right-radius: 120rpx;margin-bottom: 30rpx;text-align: center;padding-right: 20rpx;}.modal-clz {z-index: 1000000;}.diygw-dialog-modal {}.container329152 {}
</style>