微信小程序之事件交互操作实例分析


Posted in Javascript onDecember 03, 2018

本文实例讲述了微信小程序之事件交互操作。分享给大家供大家参考,具体如下:

微信小程序—点击事件

什么是事件?

指点击,触摸,按下,滑动,松开,等一系列对手机屏幕操作。

下面代码所要呈现的效果就是给两个按钮一人一个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);

希望本文所述对大家微信小程序设计有所帮助。

Javascript 相关文章推荐
用函数式编程技术编写优美的 JavaScript_ibm
May 16 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
JScript中的条件注释详解
Apr 24 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
HTML+JS实现在线朗读器
Feb 15 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 #Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 #Javascript
Vue.js 图标选择组件实践详解
Dec 03 #Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 #Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 #Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 #jQuery
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 #Javascript
You might like
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
摘自启点的main.js
2008/04/20 Javascript
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
Bootstrap表单布局
2016/07/19 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
uni-app如何实现增量更新功能
2020/01/03 Javascript
python实现通过shelve修改对象实例
2014/09/26 Python
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
python实现输入数字的连续加减方法
2018/06/22 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
Python中断多重循环的思路总结
2019/10/04 Python
基于Django实现日志记录报错信息
2019/12/17 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
酒店应聘自荐信
2013/11/09 职场文书
教师评优事迹材料
2014/01/10 职场文书
教师节促销方案
2014/03/22 职场文书
《花木兰》教学反思
2014/04/09 职场文书
贷款担保书范文
2014/05/13 职场文书
单位在职证明书
2014/09/11 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
团拜会主持词
2015/07/04 职场文书