uni-app切换页面刷新,返回上一页刷新(onShow钩子函数的使用)

切换页面刷新:通过onShow()便可实现

返回上一页通过uni.navigateBack({delta: 1});实现

以返回上一页刷新为例

从B页面返回上一页到A页面,在A页面写入方法refreshHandler()

//a.vue
methods: {    
    // 执行刷新逻辑
    refreshHandler() {
        uni.request({
            url: getApp().globalData.position + 'Produce/select_producting',
            data: {
                username: getApp().globalData.username
            },
            header: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            method: 'POST',
            dataType: 'json',
            success: res => {
                this.info = res.data.info;
            },
            fail(res) {
                console.log("查询失败")
            }
        })
    }
},

在A页面写入onLoad(),onShow()
onLoad():首次进入页面时执行的方法,这里直接引入refreshHandler() 可以直接查询到页面数据
onShow():进入页面执行的方法,主要切换到本页面就会执行该方法,这里也是直接引入refreshHandler()函数,可以在每次进入页面时,执行数据刷新(写入onShow(),便可解决进入页面不刷新的问题,返回上一页刷新的问题也会解决)

//刚进入页面执行的操作
onLoad() {
    this.refreshHandler()
},
//进入页面这行的操作
onShow() {
    this.refreshHandler()        
}

在B页面执行返回A页面的操作

//b.vue
methods: {
    is_back(e) {
        console.log('返回')
        uni.showToast({
            title: '成功',
        })
        setTimeout(function() {
        //返回上一页
            uni.navigateBack({
                delta: 1,
            });
        }, 500)
    },
},

核心

uni.navigateBack({
    delta: 1,
});

这段代码的作用是返回上一个页面,delta参数指定了返回的层数。在这里,delta为1表示返回上一层(即当前页面的前一个页面)。
注:uni.navigateBack函数是由uni-app框架提供的,用于在多页面应用中返回上一个页面。它类似于浏览器的后退按钮功能。
如果你希望执行该函数后刷新上一个页面,你可以使用下面的方式:
当成功返回上一个页面后,会调用上一个页面的onShow生命周期函数进行刷新操作。

uni.navigateBack({
    delta: 1,
    success: function () {
        const pages = getCurrentPages(); //获取当前页面栈
        const prevPage = pages[pages.length - 1]; //获取上一个页面实例对象
        prevPage.onLoad(); //调用上一个页面的onLoad方法
    }
});

总结:

方法一:直接在onShow()生命周期调用方法;
方法二:使用uni.navigateBack返回调用上一个页面的onLoad方法

你可能感兴趣的:(小程序,vue功能,uni-app,前端,javascript,vue.js,微信小程序)