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


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 相关文章推荐
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
JS数组的常见用法实例
Feb 10 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
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实现阳历到农历转换的类实例
2015/03/07 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
用js重建星际争霸
2006/12/22 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
javascript prototype原型操作笔记
2009/12/07 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
python批量提取word内信息
2015/08/09 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
详解python中__name__的意义以及作用
2019/08/07 Python
python tkinter控件布局项目实例
2019/11/04 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
任命书模板
2014/06/04 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python