所属分类:php教程
程序员必备接口测试调试工具:立即使用
Apipost = Postman + Swagger + Mock + Jmeter
Api设计、调试、文档、自动化测试工具
后端、前端、测试,同时在线协作,内容实时同步
有时候我们在做微信小程序项目的时候,会遇到如下的情况:有一个列表页,页面有一个筛选条件,点击之后跳转页面,进行条件的选择,选择完之后返回到列表页,根据筛选的条件进行数据的查询。一般这种情况更多的时候,我们看到的都是通过弹框形式来进行筛选条件进行处理的。那如果我们就想要跳转页面的这种交互方式,我们如何从子页面把参数传递到父页面呢?
【相关学习推荐:小程序开发教程】
这个地方留意一下,我们是说的子页面操作父页面的数据。
在官方文档上有一个getCurrentPages
的API(官网描述如下):
PageObject[] getCurrentPages()获取当前页面栈。数组中第一个元素为首页,最后一个元素为当前页面。
App.onLaunch
的时候调用 getCurrentPages()
,此时 page
还没有生成。通过getCurrentPages
这个API,我们可以获取到页面栈的数据,所以就可以获取到指定的页面,在子页面通过修改父页面数据的方式,我们就可以实现子页面向父页面传参的功能。
const pages = getCurrentPages();
const gotoPage = pages[pages.length - 1];
登录后复制
所以pages[pages.length - 1]
就为当前页面,父页面就为pages[pages.length - 2]
,依次类推,我们可以获取到其他的祖先页面。
然后再使用 setData
方法 gotoPage.setData({xxx: ''})
来修改设置父页面的数据,从而达到子页面向父页面传递参数的目的。之后再通过 wx.navigateBack
进行页面返回即可。
如我们文章开头提到,如果是需要从子页面向父页面传递参数,那我们可以通过弹框的形式显示内容,选择完相应的数据之后,隐藏当前的弹框或者组件。
更多编程相关知识,请访问:编程入门!!
以上就是微信小程序中如何实现子向父传参(页面通信)的详细内容,更多请关注zzsucai.com其它相关文章!