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


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读取RSS数据
Jan 20 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
koa源码中promise的解读
Nov 13 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
小程序自定义轮播图圆点组件
Jun 25 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
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
PHP进程同步代码实例
2015/02/12 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
js分页代码分享
2014/04/28 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
Vuex的实战使用详解
2019/10/31 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
python3.x上post发送json数据
2018/03/04 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
python编写俄罗斯方块
2020/03/13 Python
美国批发零售网站:GearXS
2016/07/26 全球购物
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
巴西宠物商店:Cobasi
2019/04/19 全球购物
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
职业教育毕业生求职信
2013/11/09 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
主持人演讲稿
2014/05/13 职场文书
工程承诺书怎么写
2014/05/24 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
python基础之文件处理知识总结
2021/05/23 Python
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python