大家好,又见面了,我是你们的朋友全栈君。
bug: 在onShow中执行this.onLoad(),会导致页面第一次加载的时候数组加载两次! 造成原因:页面加载先执行onLoad,再执行的onShow,就会出现在onLoad加载一次数据,在onShow中执行this.onLoad()在加载一次数据。 解决办法:将不需要刷新的数据放在onLoad中执行,将需要刷新的数据放在onShow中执行! 感谢:感谢editplusx的指正!
首先我们都知道在HTML页面我们要实现当前页面刷新一般会怎么解决呢? 1,reload()方法刷新当前页面; 2,replace() 方法刷新当前页面; 3,页面自动刷新当前页面; 三种实现js 刷新当前页面的方法用法
1,在实现效果之前,需要知道微信小程序的页面生命周期,不是很清楚的可以看微信小程序—-页面生命周期; 2,可以知道微信小程序的页面是由onLoad(页面加载)、onReady(页面初次渲染完成)、onShow(页面显示)、onHide(页面隐藏)、onUnload(页面卸载)五个周期构成; 3,知道了页面的生命周期,如何实现返回刷新和当前页刷新呢?又在什么场景需要页面刷新效果呢?
this.onLoad(this.options);
// 或者
this.onShow();
注意:如果刷新页面有上一个页面传入的参数时,需要将 【this.options】传给 onLoad!
场景:
在这个电商充斥着生活各个角落的时代,都知道在购物过程会给用户生成订单,如果用户不满意或者收货等就需要去修改订单状态,在开发过程中,当用户修改订单成功后,后台一般会返回提示是否修改成功,而不会返回这个订单的详细情况。那么我们如何使前端页面更新这个订单的状态呢?一般有两种方法实现:
实现取消订单刷新效果:
在这里实现需要实现的就是当前页面刷新,在讲场景的时候都说了,实现的方式是再次请求数据进行更新,如何再次请求数据?就是周期函数的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()
}})
}
}
})
}
场景:
电商购买物品时填写地址,然后返回购买页面,更新填写的新地址。 为实现返回刷新效果:
实现返回刷新效果:
更新收货地址的代码:
onShow() { //返回显示页面状态函数
//错误处理
//this.onLoad()//再次加载,实现返回上一页页面刷新
//正确方法
//只执行获取地址的方法,来进行局部刷新
}
// 当前选择订单状态
getCurrentValue({detail}){
let value = detail.status;
this.setData({value})
this.initOrderList();
},
// 初始化订单列表
initOrderList(){
this.data.list = [];
this.data.curPage = 1;
this.data.total = 1000;
this.getOrderList();
wx.pageScrollTo({scrollTop: 0})
}
注意:
// 获取页面栈中的上一页
const _getPrevPage = () => {
let pages = getCurrentPages();
let len = pages.length;
return pages && pages.length && pages[len - 2];
}
// 判断页面栈上一页是否是订单预览界面
hasPrevPageOrderConfirm(page){
return page && page.route && page.route.indexOf('orderConfirm') > -1;
}
let prevPage = _getPrevPage();
if(this.hasPrevPageOrderConfirm(prevPage)){
prevPage.setData({address});
prevPage.data.isRefreshData = false;
prevPage.getOrderPreviewInfo();
this.$route({type: 'navigateBack', params: {delta: 1}})
}
注意:此处刷新最好和方法二配合使用,这样调用方法,逻辑处理等比较集中处理!
import { ProxyStore } from './store/proxyStore';
let store = new ProxyStore({
state: {
address: {},
orderInfo: {}
}
})
import store from './utils/store';
import axios from "./utils/request/axios";
App({
store,
axios
})
const { store , axios } = getApp();
let prevPage = _getPrevPage();
if(this.hasPrevPageOrderConfirm(prevPage)){
prevPage.getOrderPreviewInfo().then(orderInfo => {
store.setState({address,orderInfo})
},console.log)
this.$route({type: 'navigateBack', params: {delta: 1}})
}
注意:
微信小程序要实现页面刷新,简单的说就是在不同的地方执行onLoad周期函数。不过需要注意在刷新时是否需要初始化变量,这个必须注意。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/132235.html原文链接:https://javaforall.cn