微信小程序之事件交互操作实例分析
作者:我要看一下山顶的风景 发布时间:2024-04-19 10:29:54
标签:微信小程序,事件交互
本文实例讲述了微信小程序之事件交互操作。分享给大家供大家参考,具体如下:
微信小程序—点击事件
什么是事件?
指点击,触摸,按下,滑动,松开,等一系列对手机屏幕操作。
下面代码所要呈现的效果就是给两个按钮一人一个ID然后点击谁,在上面显示信息那就显示 点击了谁,点击了多少次,这多少次没有分开啊,次数是点击他两的总和。下面另一代码是分开的,各计各的。
1. 在index.wxml 中设置点击事件(测试时需要删除注释部分)
<view class="page">
//点击后在这里显示信息,来表明是有点击事件的
<view>{{clickMsg}}</view>
//设置点击事件
<view>
<view id="1" class="view-item" bindtap="clickMe">按钮1</view>
<view id="2" class="view-item" bindtap="clickMe">按钮2</view>
</view>
</view>
2. 在index.wxss中设置view的样式
.page{
text-align: center;
}
.view-item{
background-color:green;
width: 60px;
height: 30px;
margin: 30px auto 0 auto;
color: navajowhite;
border-radius: 10px;
padding: 20px;
}
3. 在index.js中设置点击事件的响应
//注册两个变量
var id;
var count = 0;
var param = {
data: {
clickMsg: '显示点击内容'
},
//function就是触发点击事件的函数,以后是点击事件你就这样写就行
//e就是event事件对象,包含了很多,比如:谁被点击了,什么时候被点击了
clickMe: function (e) {
count++;
console.log(e);//把点击事件详细信息打印到调试的console中
id = e.currentTarget.id; //获取被点击按钮的id
param.data.clickMsg = '显示点了谁:' + id + '点击次数' + count;
//重新刷新clickMsg的显示内容,要想看到message变化必须写这个
this.setData(param.data);
}
};
Page(param);
//这个必须写,它是为了让param这个函数真实化,要不然你干写着,在index.wxml中调用时没反应的
怎样让点击控件view0携带私有信息呢
为了以后传值什么的
<view class="view-item" data-siyou="飞了" bindtap="clickMe">点击我view0</view>
怎样调用控件私有信息呢?
var param={
clickMe:function(e){
id=e.currentTarget.id;
console.log(e.currentTarget.id.dataset.siyou);
}
};
Page(param);
二、添加判断的点击事件
index.wxml
<view class="page">
<view>{{Message}}</view>
<view>{{Message1}}</view>
<view>
<view id="view1" class="view-item" bindtap="clickMe">按钮1</view>
<view id="view2" class="view-item" bindtap="clickMe">按钮2</view>
</view>
</view>
index.js
var id;
var count1 = 0;
var count2 = 0;
var param = {
data: {
Message: '点击后,在这里显示信息',
Message1: '点击后,在这里显示信息'
},
clickMe: function (e) {
console.log(e);
id = e.currentTarget.id;
if (id == 'view1') {
count1++;
param.data.Message = '显示点击了' + id + '点击了' + count1 + '次';
this.setData(param.data);
} else if (id == 'view2') {
count2++;
param.data.Message1 = '显示点击了' + id + '点击了' + count2 + '次';
this.setData(param.data);
}
}
};
Page(param);
希望本文所述对大家微信小程序设计有所帮助。
来源:https://blog.csdn.net/qq_34589749/article/details/53027580


猜你喜欢
- 导言篇:我的python环境是:python3.6.5这里我选择的GUI编程包是:tkintertkinker在python2.5以后就是自
- 前言ORDER BY 字段名 升序/降序,相信进来的朋友都认识这个排序语句,但遇到一些特殊的排序,单单使用字段名就无法满足需求了,下面给大家
- Go批处理语句用于同时执行多个语句使用、切换数据库use mastergo创建、删除数据库方法1、--判断是否存在该数据库,存在就删除if
- 首先,如果以前安装的话,要删除干净。我也找了
- Python 调用ChatGPT API 接口介绍ChatGPT 介绍https://platform.openai.com/example
- 目录前言cv2.drawMarker()函数说明参数说明利用鼠标回调函数交互式画点例1,简单的例子例2,删除功能总结前言这里所谓画点的意思是
- 说明: 本文的自动更新功能使用的项目为 electron-vue 脚手架搭建一个默认项目。 参考的文章如下:electron-vue 中文文
- 前言联邦学习(Federated Learning) 是人工智能的一个新的分支,这项技术是谷歌于2016年首次提出,本篇论文第一次描述了这一
- 目录什么是pyecharts?pyecharts安装加载折线图的绘制条形图和折线图的结合绘制漏斗图什么是pyecharts?pyechart
- 简单的模型例如线性回归,LR等模型非常易于解释,但在实际应用中的效果却远远低于复杂的梯度提升树模型以及神经网络等模型。现在大部分互联网公司的
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
- MySQL设置查询缓存的用意:把查询到的结果缓存起来,下次再执行相同查询时就可以直接从结果集中取;这样就比重新查一遍要快的多。查询缓存的最终
- infer 这个关键字,整理记录一下,避免后面忘记了。有点难以理解呢。inferinfer 是在 typescript 2.8中新增的关键字
- 安装selenium打开命令控制符输入:pip install -U selenium火狐浏览器安装firebug:www.firebug.
- 想必Java 的开发者没有不知道或者没用过 jps 这个命令的,这个命令是用来在主机上查看有哪些 Java 程序在运行的。我刚用 Go 语言
- 今天真的被编码问题一直困扰着,午休都没进行。也真的见识到了各种编码。例如:gbk,unicode、utf-8、ansi、gb2312等。如果
- 最近在用python连接sqlserver读取数据库,读取数据时候在本机电脑正常,但是把程序部署到服务器运行时一直报错“未发现数据源名称并且
- W3C(万维网联盟)日前发布了HTML 5公共草案,这是10年来对HTML的一次主要升级。据国外媒体报道,W3C HTML5草案于本周二发布
- 作为一个标准的程序猿,为程序编写说明文档是一步必不可少的工作,如何才能写的又好又快呢,下面我们就来详细探讨下吧。今天将告诉大家一个简单平时只
- 代码实现的目的:为一个自定义的类的某个属性在使用它时候,触发某个事件。 该程序的效果:点击输入按钮,弹出一个脚本提示输入框让用户输入他的姓名