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


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客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 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中显示格式化的用户输入
2006/10/09 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
php网页病毒清除类
2014/12/08 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
JQuery实现图片轮播效果
2015/09/15 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
python实现各种插值法(数值分析)
2019/07/30 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
Python 没有main函数的原因
2020/07/10 Python
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
致垒球运动员加油稿
2014/02/16 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
社区清明节活动总结
2014/07/04 职场文书
师德承诺书2015
2015/04/28 职场文书
Python开发简易五子棋小游戏
2022/05/02 Python
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript