低代码可视化Uniapp点击事件-代码生成器

简介: 低代码可视化Uniapp点击事件-代码生成器

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


目录
相关文章
|
1月前
|
数据可视化 前端开发 UED
低代码可视化-Uniapp Cascader级联选择器-代码生成器
Cascader级联选择器是一种常用的UI组件,适用于从具有层级关系的数据中进行选择,如省市区选择、公司层级选择等。它通过分组多列展示选项,支持多级分类、联动选择、搜索与过滤等功能。组件具备自定义样式、禁用选项、清空选项等特性,广泛应用于电商、企业内部系统等场景。代码示例展示了其详细的实现和调用方法。
40 7
低代码可视化-Uniapp Cascader级联选择器-代码生成器
|
2月前
|
数据可视化 API
低代码可视化-uniapp购物车页面-代码生成器
低代码可视化-uniapp购物车页面-代码生成器
44 1
|
2月前
|
移动开发 编解码 数据可视化
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
39 0
|
2月前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
30 0
|
2月前
|
JSON 数据可视化 JavaScript
低代码可视化-uniapp响应式数据data-代码生成器
低代码可视化-uniapp响应式数据data-代码生成器
39 0
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
131 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
63 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
86 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
117 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
119 7