zoukankan      html  css  js  c++  java
  • 微信小程序返回上一页传参并刷新

    问题

    微信小程序onLoad(options)方法在整个生命周期中只加载一次,也就是你进入下个页面,再返回时,是不会再次触发的,所以你返回是url传参是行不通了。

    需求

    现在有这么一个需求:一个商品支付页面,点击优惠卷进入优惠券列表页,选中优惠券后带着数据再返回到支付页面。

    方法

    一、使用到的方法是小程序的页面栈,感兴趣可以打印一下pages的内容,就是你页面跳转的轨迹数组,最后一项就是当前页面,倒数第二个就是上一页。很好理解,因为在当前页停止了,肯定是最后一个

    //获取页面栈
    let pages = getCurrentPages();
    //获取所需页面
    let currPage = pages[pages.length - 1];//当前页面
    let prevPage = pages[pages.length -2];//上一页

    二、在支付页把需要再次刷新的数据都放到onShow()方法中,不需要刷新的放到onLoad()方法中

    思路

    1、我们的目标是把优惠券的数据渲染到支付页上,所以先在优惠券页面点击优惠券的时候通过页面栈获取到上一页(也就是支付页),将本条数据动态添加到支付页的data中

    //获取页面栈
    let pages = getCurrentPages();
    //获取所需页面
    let prevPage = pages[pages.length -2];//上一页
    prevPage.setData({
        yourData:yourData,//你需要传过去的数据
    });

    2、将需要刷新的数据放到onShow()方法中

    //这里展示在onShow方法中获取当前页onLoad方法中的options
    onShow:function(){
        let pages = getCurrentPages();
        let currPage = pages[pages.length - 1];
        //当前页的options,啥意思呢,就是你可能某个函数需要刷新,但是他的参数正好是传过来的参数
        console.log(currPage.options);  
    }

    你在优惠券页点击之后,因为你的数据已经存到支付页了,所以返回支付页后,你可以直接在data中获取到你需要的数据,进行你需要的操作。

    Ok,这就完事了。

  • 相关阅读:
    css雪碧图生成工具4.3更新
    移动端webapp自适应实践(css雪碧图制作小工具实践)图文并茂
    css雪碧图生成工具4.2更新
    手机端页面rem自适应脚本
    css雪碧图生成工具4.1更新
    V4.0到来了,css雪碧图生成工具4.0更新啦
    css sprite,css雪碧图生成工具V3.0更新
    css sprite css雪碧图生成工具
    CSS3 Loading(加载)动画效果
    js new
  • 原文地址:https://www.cnblogs.com/hess/p/12024036.html
Copyright © 2011-2022 走看看