微信小程序之事件交互操作实例分析
作者:我要看一下山顶的风景 时间: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
标签:微信小程序,事件交互
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
php while循环控制的简单实例
2024-05-11 10:03:54
python如何在pygame中设置字体并显示中文详解
2021-03-21 13:32:50
Python中的自定义函数学习笔记
2023-11-21 15:56:56
![](https://img.aspxhome.com/file/2023/6/64336_0s.png)
element-UI el-table树形数据 修改小三角图标方式
2023-07-02 17:09:53
![](https://img.aspxhome.com/file/2023/9/139959_0s.png)
Python 将json序列化后的字符串转换成字典(推荐)
2021-11-17 12:36:51
Git 教程之远程仓库详解
2023-10-18 20:34:16
![](https://img.aspxhome.com/file/2023/9/132269_0s.jpg)
Pygame游戏开发之太空射击实战子弹与碰撞处理篇
2022-05-24 03:59:19
![](https://img.aspxhome.com/file/2023/4/66344_0s.png)
python 字符串详解
2022-09-27 04:44:25
![](https://img.aspxhome.com/file/2023/4/111854_0s.png)
Python paramiko模块的使用示例
2021-05-12 20:30:00
Oracle 数据显示 横表转纵表
2009-07-26 08:57:00
innodb_flush_method取值方法(实例讲解)
2024-01-13 10:12:44
sqlserver 2008手工修改表结构,表不能保存的问题与解决方法
2024-01-23 03:07:26
![](https://img.aspxhome.com/file/2023/0/102060_0s.jpg)
pycharm三个有引号不能自动生成函数注释的问题
2021-04-05 15:53:02
![](https://img.aspxhome.com/file/2023/0/133550_0s.png)
Python 读取位于包中的数据文件
2023-06-09 00:16:03
php插件Xajax使用方法详解
2023-10-19 23:28:40
![](https://img.aspxhome.com/file/2023/5/555251_0s.png)
SQL常用的四个排序函数梳理
2024-01-13 04:41:49
![](https://img.aspxhome.com/file/2023/6/124836_0s.png)
人工智能(AI)首选Python的原因解析
2021-03-23 16:04:12
![](https://img.aspxhome.com/file/2023/3/112093_0s.jpg)
python 列表,数组和矩阵sum的用法及区别介绍
2022-12-16 09:01:47
![](https://img.aspxhome.com/file/2023/7/127847_0s.jpg)
VSCode必装Go语言以下插件的思路详解
2024-04-30 09:53:42
对Python中range()函数和list的比较
2021-08-26 14:59:47