微信小程序-参数传递与事件处理
来源:互联网 发布:pptv网络电视怎么用 编辑:程序博客网 时间:2024/05/19 03:24
前言
开发过程中经常会遇到从一个页面携带数据到另一个页面的情况,所以需要知道以下信息,什么是事件?有哪些传递方式?如果传递数组呢?如果传递对象呢?
一、事件
什么是事件
事件是视图层到逻辑层的通讯方式
事件可以将用户的行为反馈到逻辑层进行处理
事件可以绑定在组件上,当达到触发事件,就会执行逻辑层对应的事件处理函数
事件对象可以携带额外信息,如id, dataset, touches
事件处理的使用
通过在wxml中设置bindtap、catchtap等,在js中写对应的实现方法(不过这种方式目前有个缺点,点击的时候没有点击效果),使用方法如下
以下摘自微信小程序官方教程,在wxml中绑定一个事件
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
然后在对应的js中写出事件的具体实现
Page({ tapName: function(event) { console.log(event) }})
事件分类
事件分为冒泡事件
和非冒泡事件
冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递
一般使用场景中,例如一个列表的item中有多个点击事件需要处理,就可以使用catchtap阻止向上冒泡
二、参数传递
参数传递有两种方式
在wxml
中使用navigator
跳转url传递参数
在wxml
中绑定事件后,通过data-hi="
参数”的方式传递
(1)navigator跳转url传递字符串参数
代码如下,将要传递到另一个页面的字符串testId的值赋值到url中
<navigator class="test-item" url="../../pages/test/test?testId={{testData.testId}}"> ...</navigator>
在js页面中onLoad方法中接收
Page({ onLoad: function(options) { var testId = options.testId console.log(testId) }})
(2)navigator跳转url传递数组
如果一个页面要将一个数组,如相册列表传递到另一个页面
<navigator class="test-item" url="../../pages/test/test?albumList={{testData.albumList}}"> ...</navigator>
传递到js后从options中得到的是个字符串,每个图片的url通过’,’分隔,所以此时还需要对其进行处理,重新组装为数组
Page({ data: { // 相册列表数据 albumList: [], }, onLoad: function (options) { var that = this; that.setData({ albumList: options.albumList.split(",") }); }})
(3)wxml中配置data-testid传递字符串
这种方式一般是在wxml中绑定事件,同时设置需要传递的数据,如果需要传递多个,可以写多个data-[参数]的方式进行传递
<view bindtap="clickMe" data-testId={{testId}}"> ...</view>
在js页面中自定义方法clickMe中接收
Page({ clickMe: function(event) { var testId = event.currentTarget.dataset.testid; wx.navigateTo({ url: '../../pages/test/test' }) }})
注意:通过wxml设置data-[参数名]传递参数,[参数名]只能是小写,不能有大写
(4)wxml中配置data-albumlist传递数组
其实原理同上,上代码
<view bindtap="clickMe" data-albumlist={{testData.albumList}}"> ...</view>
在js页面中自定义方法clickMe中接收
Page({ clickMe: function(event) { var albumList = event.currentTarget.dataset.albumlist.split(","); wx.navigateTo({ url: '../../pages/test/test' }) }})
链接來源:简书作者:花郎
- 微信小程序-参数传递与事件处理
- 微信小程序-传递多个参数与事件处理
- JavaScript事件处理程序传递参数
- JAVASCRIPT中给事件处理程序传递参数
- 微信小程序 页面跳转与参数传递
- 给wxPython事件处理函数传递参数
- 事件与处理程序
- 微信小程序-参数传递
- React 向事件处理程序传递参数(不跳,alert)
- JS与JQuery点击事件传递参数
- Android UI事件传递与处理机制
- Android 事件传递与焦点处理(tv)
- Android触摸事件的传递与处理
- Python中 命令行参数传递 与 处理
- 微信小程序传递参数方法?
- 微信小程序url参数传递
- JavaScript:事件流与事件处理程序
- JS事件流与事件处理程序
- 友元函数
- 第一章:导航
- Java调用WebService的几种方式
- java中对方法的理解
- ImageLoadListview
- 微信小程序-参数传递与事件处理
- 手机无线网wifi存储地址(查看已经连接的wifi密码)
- 原理上说明为什么Arangodb更快(索引自由邻接或混合索引)
- 洛谷P1914 小书童——密码
- 华为优招面试题---迷宫问题
- FZU Problem 2256 迷宫(dfs序)
- Vue 分享3
- FindBugs What Why How
- Spring,SpringMVC,hibernate配置