小程序基础学习(事件处理)

                                                                        

原理:组件内部设置点击事件,然后冒泡到页面捕获点击事件

在组件内部设置点击事件

处理点击事件,并告诉页面 

页面捕获点击事件 

页面处理点击事件

组件代码

<!--components/my-info/my-info.wxml-->
<view class="title">
<text class="texts">{{title}}</text>
</view>
<view class="conut">
<text class="number" bind:tap="onClick">{{conut}}</text>
</view>
// components/my-info/my-info.js
Component({/*** 组件的属性列表*/properties: {title:{type:String,value:"标题"},conut:{type:String,value:"内容没有写哦"},},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {onClick(){this.triggerEvent("onBtnClick","点击了详情")}}
})
/* components/my-info/my-info.wxss */
.texts{color: blue;font-size: large;}
.number{color:chartreuse;font-size: larger;
}
{"component": true,"usingComponents": {}
}

 页面代码

<navigation-bar title="牧原" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<my-info title="猪王" conut="最大的一头猪" bindonBtnClick="onBtnClickOut"></my-info>
// pages/five/five.js
Page({onBtnClickOut(){console.log("你点了一下组件详情")}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/240265.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Springboot的网上点餐系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的网上点餐系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&am…

docker-compose和docker compose的区别

在docker实际使用中&#xff0c;经常会搭配Compose&#xff0c;用来定义和运行多个 Docker 容器。使用时会发现&#xff0c;有时候的指令是docker-compose&#xff0c;有时候是docker compose&#xff0c;下面给出解释。 docker官方文档&#xff1a;https://docs.docker.com/c…

iphone 5s的充电时序原理图纸,iPAD充电讲解

上一篇写了iphone 5的时序。那是电池供电的开机时序。iphone 5s也是差不多的过程&#xff0c;不说了。现在看iphone5s手机充电时候的时序。iphone5s充电比iphone5充电简单了很多。 首先是usb接口接到手机上&#xff0c;usb线连接到J7接口上。J7接口不只是接usb&#xff0c;还能…

[NSSCTF Round#16 Basic]RCE但是没有完全RCE

RCE但是没有完全RCE wp 题目代码&#xff1a; 第一关 <?php error_reporting(0); highlight_file(__file__); include(level2.php); if (isset($_GET[md5_1]) && isset($_GET[md5_2])) {if ((string)$_GET[md5_1] ! (string)$_GET[md5_2] && md5($_GET[m…

IntelliJ IDEA使用学习

一、安装教程 网上自行下载&#xff0c;CSDN不然过审二、使用教程 2.1 快捷键操作与设置 设置 Setting——>按键映射——>选择顺手的系统快捷键 编写代码 CtrlShift Enter&#xff0c;语句完成。 “&#xff01;”&#xff0c;否定完成&#xff0c;输入表达式时按 …

现代控制理论基础

在学习卡尔曼滤波、粒子滤波、隐马尔可夫模型时候&#xff0c;经常会提到状态方程的概念&#xff0c;这边联想到当时学习过的一门课程现代控制理论&#xff0c;这边就简单回顾一下吧。在回顾之前&#xff0c;串联下高等数学中微分方程的知识点。 一. 微分方程 高等数学上册第…

C++ 最短路总结 朴素Dijkstra算法 || 模版题,求最短路

算法选择&#xff1a; 稠密图用邻接矩阵写&#xff0c;稀疏图用邻接表写。 朴素dijkstra&#xff1a; 给定一个 n 个点 m 条边的有向图&#xff0c;图中可能存在重边和自环&#xff0c;所有边权均为正值。 请你求出 1 号点到 n 号点的最短距离&#xff0c;如果无法从 1 号点…

Win10电脑关闭OneDrive自动同步的方法

在Win10电脑操作过程中&#xff0c;用户想要关闭OneDrive的自动同步功能&#xff0c;但不知道具体要怎么操作&#xff1f;首先用户需要打开OneDrive&#xff0c;然后点击关闭默认情况下将文档保存到OneDrive选项保存&#xff0c;最后关闭在这台电脑上同步设置保存就好了。接下来…

认识监控系统zabbix

利用一个优秀的监控软件&#xff0c;我们可以: ●通过一个友好的界面进行浏览整个网站所有的服务器状态 ●可以在 Web 前端方便的查看监控数据 ●可以回溯寻找事故发生时系统的问题和报警情况 了解zabbix zabbix是什么&#xff1f; ●zabbix 是一个基于 Web 界面的提供分布…

Android Studio下载gradle反复失败

我的版本&#xff1a;gradle-5.1.1 首先检查设置路径是否正确&#xff0c;参考我的修改&#xff01; 解决方案 1.手动下载Gradle.bin Gradle Distributions 下载地址 注意根据编译器提示下载&#xff0c;我这要求下载的是bin 而不是all 2.把下载好的整个压缩包放在C:\Users\…

uni-app的学习【第三节】

五 运行环境判断与跨端兼容 uniapp为开发者提供了一系列基础组件,类似HTML里的基础标签元素,但uni-app的组件与HTML不同,而是与小程序相同,更适合手机端使用。 虽然不推荐使用 HTML 标签,但实际上如果开发者写了`div`等标签,在编译到非H5平台时也会被编译器转换为 `view`…

学习JavaEE的日子 day12 构造方法 类的制作

Day12 需求&#xff1a;创建人类的对象&#xff0c;并操作对象 分析&#xff1a; 人类 - Person 属性&#xff1a;name、sex、age 方法&#xff1a;eat、sleep 场景&#xff1a;创建多个对象&#xff0c;去操作对象 //测试类&#xff1a;该类中有main方法&#xff0c;测试我们写…

Elasticsearch的基本功能和使用

Elasticsearch &#xff0c;简称为 ES&#xff0c;是一款非常强大的开源的高扩展的分布式全文 检索引擎&#xff0c;可以帮助我们从海量数据中快速找到需要的内容,它可以近乎实时的 存储、检索数据.还可以可以实现日志统计、分析、系统监控等功能. 官网:https://www.elastic.c…

Spark SQL基础

SparkSQL基本介绍 什么是Spark SQL Spark SQL是Spark多种组件中其中一个,主要是用于处理大规模的结构化数据 什么是结构化数据: 一份数据, 每一行都有固定的列, 每一列的类型都是一致的 我们将这样的数据称为结构化的数据 例如: mysql的表数据 1 张三 20 2 李四 15 3 王五 1…

【揭秘AI】穿越时光隧道,探秘AI起源与发展01

算盘 被誉为世界上最古老的计算机之一&#xff0c;是一种手动操作的计算工具&#xff0c;起源于中国。它主要由框、梁和珠子组成&#xff0c;通过移动珠子在档位上的位置来进行加减乘除运算。算盘的发明时间可以追溯到公元前或公元初期&#xff0c;据历史记载&#xff0c;东汉…

Angular系列教程之MVC模式和MVVM模式

文章目录 MVC模式MVVM模式MVC与MVVM的区别Angular如何实现MVVM模式总结 在讨论Angular的时候&#xff0c;我们经常会听到MVC和MVVM这两种设计模式。这两种模式都是为了将用户界面(UI)和业务逻辑分离&#xff0c;使得代码更易于维护和扩展。在这篇文章中&#xff0c;我们将详细介…

游戏素材永不缺,免费在线AI工具Scenario功能齐全,简单易用

Scenario是一个在线的AI驱动的工具&#xff0c;主要用于游戏艺术创作。它提供了一套全面的功能&#xff0c;旨在帮助游戏开发者创建与其独特风格和艺术方向相符的独特、高质量的游戏艺术。Scenario的突出特点之一是它的微调能力&#xff0c;允许用户根据独特的风格和艺术方向训…

uniapp 编译后文字乱码的解决方案

问题: 新建的页面中编写代码&#xff0c;其中数字和图片都可以正常显示&#xff0c;只有中文编译后展示乱码 页面展示也是乱码 解决方案: 打开HuilderX编辑器的【文件】- 【以指定编码重新打开】- 【选择UTF-8】 然后重新编译就可以啦~ 希望可以帮到你啊~

如何利用小程序介绍公司品牌形象?

企业小程序的建设对于现代企业来说已经成为了一项必不可少的工作。随着移动互联网的快速发展&#xff0c;越来越多的职场人士和创业老板希望通过小程序来提升企业形象&#xff0c;增强与用户的互动&#xff0c;实现更好的商业效果。在这个过程中&#xff0c;使用第三方制作平台…

CMU15-445-Spring-2023-Project #3 - 前置知识(lec10-14)

Lecture #10_ Sorting & Aggregation Algorithms Query Plan 数据库系统会将 SQL 编译成查询计划。查询计划是一棵运算符树。 Sorting DBMS 需要对数据进行排序&#xff0c;因为根据关系模型&#xff0c;表中的tuple没有特定的顺序。排序使用 ORDER BY、GROUP BY、JOIN…