zoukankan      html  css  js  c++  java
  • 微信小程序----返回上一页刷新或当前页刷新

    声明

    bug: 在onShow中执行this.onLoad(),会导致页面第一次加载的时候数组加载两次!
    造成原因:页面加载先执行onLoad,再执行的onShow,就会出现在onLoad加载一次数据,在onShow中执行this.onLoad()在加载一次数据。
    解决办法:将不需要刷新的数据放在onLoad中执行,将需要刷新的数据放在onShow中执行!
    感谢:感谢editplusx的指正!

    HTML实现当前页面刷新

    首先我们都知道在HTML页面我们要实现当前页面刷新一般会怎么解决呢?
    1,reload()方法刷新当前页面;
    2,replace() 方法刷新当前页面;
    3,页面自动刷新当前页面;
    三种实现js 刷新当前页面的方法用法

    微信小程序—-返回上一页刷新或当前页刷新

    1,在实现效果之前,需要知道微信小程序的页面生命周期,不是很清楚的可以看微信小程序—-页面生命周期
    2,可以知道微信小程序的页面是由onLoad(页面加载)、onReady(页面初次渲染完成)、onShow(页面显示)、onHide(页面隐藏)、onUnload(页面卸载)五个周期构成;
    3,知道了页面的生命周期,如何实现返回刷新和当前页刷新呢?又在什么场景需要页面刷新效果呢?

    当前页面刷新

    场景:

    在这个电商充斥着生活各个角落的时代,都知道在购物过程会给用户生成订单,如果用户不满意或者收货等就需要去修改订单状态,在开发过程中,当用户修改订单成功后,后台一般会返回提示是否修改成功,而不会返回这个订单的详细情况。那么我们如何使前端页面更新这个订单的状态呢?一般有两种方法实现:1,人为的修改前端的数据;2,再次请求数据(也就是页面刷新)。
    为实现取消订单刷新效果:
    这里写图片描述
    实现取消订单刷新效果:
    这里写图片描述
    在这里实现需要实现的就是当前页面刷新,在讲场景的时候都说了,实现的方式是再次请求数据进行更新,如何再次请求数据?就是周期函数的onLoad,将页面重新加载,但是需要注意的是必须对相关data变量进行初始化。

    更新订单状态函数的代码:

    //更新订单状态函数
    updateOrder(orderID, orderState, title){
        //获取用户保存在本地的个人信息
        let account = wx.getStorageSync('accountInfo'); 
        //请求服务器接口更新订单状态
        app.globalMethod.REQUEST({
          url: urlList.updateOrderStateUrl,
          data: {
            accountID: account.accountID,
            passWord: account.passWord,
            orderID: orderID,
            orderState: orderState,
            token: ''
          },
          success: res => {
            // console.log(res)
            //如果更新成功
            if(res.data.state == '1'){
                //提示用户订单状态修改成功
              wx.showToast({title: '您已' + title,success: res => {
                //在提示的成功函数中初始化当前加载订单页为第一页,清空订单列表数据
                this.setData({ currentPage: 1,orderList: []});
                //用onLoad周期方法重新加载,实现当前页面的刷新
                this.onLoad()
              }})
            }
          }
        })
      }

    返回上一页刷新

    场景:

    电商购买物品时填写地址,然后返回购买页面,更新填写的新地址。
    为实现返回刷新效果:
    这里写图片描述
    实现返回刷新效果:
    这里写图片描述
    1,通过页面的生命周期,可以知道在微信小程序中,实现返回上一页的时候其实是直接将隐藏的页面再显示出来,所以不存在页面的再次加载,但是如果业务需求再次加载,在么实现?
    2, 通过上边的逻辑可以看出过程是: A页面 —》 B页面(改变A页面的数据)(在A跳转B的过场实现是A页面隐藏B页面渲染) —》返回A页面(更新A页面数据)(返回过程是隐藏B页面显示A页面
    3,通过上边的流程,可以看出是在A页面的显示函数中执行加载函数(onShow(){this.onLoad()})

    更新收货地址的代码:

    onShow() { //返回显示页面状态函数
        //错误处理
        //this.onLoad()//再次加载,实现返回上一页页面刷新
        //正确方法
        //只执行获取地址的方法,来进行局部刷新
    }

    总结

    微信小程序要实现页面刷新,简单的说就是在不同的地方执行onLoad周期函数。不过需要注意在刷新时是否需要初始化变量,这个必须注意。

    下载

    我的博客,欢迎交流!

    我的CSDN博客,欢迎交流!

    微信小程序专栏

    前端笔记专栏

    微信小程序实现部分高德地图功能的DEMO下载

    微信小程序实现MUI的部分效果的DEMO下载

    微信小程序实现MUI的GIT项目地址

    微信小程序实例列表

    前端笔记列表

    游戏列表

  • 相关阅读:
    牛顿迭代法 Newton-Raphson Method
    [LeetCode]73. Sqrt(x)平方根
    [LeetCode]72. Basic Calculator基本计算器
    [LeetCode]71. Missing Number缺失的数
    [LeetCode]70. Ugly Number II第N个丑数
    [LeetCode]69. Recerse Integer旋转整数
    [LeetCode]68. Palindrome Number回文数字
    [LeetCode]67. Number of Digit One1的个数和
    [LeetCode]66. Factorial Trailing Zeros阶乘的尾零个数
    STL的容器哈希表
  • 原文地址:https://www.cnblogs.com/linewman/p/9918451.html
Copyright © 2011-2022 走看看