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


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 相关文章推荐
JS location几个方法小姐
Jul 09 Javascript
javascript针对DOM的应用实例(一)
Apr 15 Javascript
JS实现标签页效果(配合css)
Apr 03 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
Vue插件之滑动验证码
Sep 21 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
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
详解Python核心对象类型字符串
2018/02/11 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
使用python画社交网络图实例代码
2019/07/10 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
python与mysql数据库交互的实现
2020/01/06 Python
Python PIL库图片灰化处理
2020/04/07 Python
英国家电直销:Appliances Direct
2016/09/22 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
行政管理人员精品工作推荐信
2013/11/04 职场文书
出纳岗位职责
2013/11/09 职场文书
应届生法律顾问求职信
2013/11/19 职场文书
医院实习介绍信
2014/01/12 职场文书
服装行业创业计划书范文
2014/02/05 职场文书
企业总经理岗位职责
2014/02/13 职场文书
实习单位鉴定评语
2014/04/26 职场文书
美化环境标语
2014/06/20 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
2017春节晚会开幕词
2016/03/03 职场文书