(编辑:jimmy 日期: 2024/11/17 浏览:2)
前言
开发过程中经常会遇到从一个页面携带数据到另一个页面的情况,所以需要知道以下信息,什么是事件?有哪些传递方式?如果传递数组呢?如果传递对象呢?
一、事件
什么是事件
事件处理的使用
通过在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阻止向上冒泡
二、参数传递
参数传递有两种方式
(1)navigator跳转url传递字符串参数
代码如下,将要传递到另一个页面的字符串testId的值赋值到url中
<navigator class="test-item" url="../../pages/test/test"> ... </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"> ... </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' }) } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。