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


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 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
JavaScript数组排序功能简单实现
May 14 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 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
php无限极分类实现的两种解决方法
2013/04/28 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
JavaScript 拾漏补遗
2009/12/27 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
js移动端图片压缩上传功能
2020/08/18 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
JS打印彩色菱形的实例代码
2018/08/15 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
python中sets模块的用法实例
2014/09/30 Python
python中常用的九种预处理方法分享
2016/09/11 Python
python实现随机漫步算法
2018/08/27 Python
Python绘制股票移动均线的实例
2019/08/24 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
Django choices下拉列表绑定实例
2020/03/13 Python
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
外语系毕业生找工作的求职信
2013/11/28 职场文书
探亲假请假条
2014/04/11 职场文书
主要领导对照检查材料
2014/08/26 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
2016年党建工作简报
2015/11/26 职场文书
导游词之太原天龙山
2020/01/02 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL