uni-app小程序刷新当前页面的两种方法

子成君 14 0

方法一

wx.relaunch来刷新当前页面,页面会被重载,若路由携带参数需自行拼接,方法如下

    /* 获取当前页带参数的url */
    splicePageUrlWithParams(obj) {
        const path = obj.route
        const query = obj.options
        // 拼接url的参数
        var urlWithParams = '/' + path + '?'
        for (let key in query) {
            const value = query[key]
            urlWithParams += key + '=' + value + '&'
        }
        urlWithParams = urlWithParams.substring(0, urlWithParams.length - 1)
        return urlWithParams
    },
    getPageUrl(lastIndex, withParams = true) {
        const pages = getCurrentPages()
        if (pages.length > 0 && pages.length >= lastIndex) {
            const thePage = pages.splice(-lastIndex, 1)[0]
            if (withParams) {
                return this.splicePageUrlWithParams(thePage)
            } else {
                return `/${thePage.route}`
            }
        } else {
            console.log('pages are empty or lastIndex error')
            return ''
        }
    },

上面是获取页面路由和参数的方法,具体使用如下

    reload() {
        // 获取当前页面路由 具体请看该函数的实现
        const url = this.getPageUrl(1) 
        uni.reLaunch({
            url,
            success: () => {
                console.log('reload触发了!!!!!! url====>' + url)
                }
            }
        })
    }

方法二

通过获取该页面实例执行其内部的生命周期方法来刷新页面

    reload() {
        // 页面重载
        const pages = getCurrentPages()
        // 声明一个pages使用getCurrentPages方法
        const curPage = pages[pages.length - 1]
        // 声明一个当前页面
        curPage.onLoad(curPage.options) // 传入参数
        curPage.onShow()
        curPage.onReady()
        // 执行刷新
    },

[aru_42]若你使用的是Vue的mounted生命周期来获取页面传参,那该方法需要你用小程序生命周期onLoad来代替mounted使用

发表评论 取消回复
OwO 图片 链接 代码

分享