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


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基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
简单的Jquery全选功能
Nov 07 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
详解vue.js的devtools安装
May 26 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 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
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
php跨站攻击实例分析
2014/10/28 PHP
php魔术变量用法实例详解
2014/11/13 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
python学生管理系统开发
2019/01/30 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
中层干部岗位职责
2013/12/18 职场文书
大学校庆邀请函
2014/01/11 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
入职担保书怎么写
2014/05/12 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
标准毕业生自荐信
2014/06/24 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
听课评课活动心得体会
2016/01/15 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
Python内置的数据类型及使用方法
2022/04/13 Python