美文网首页
ni-app关闭页面,而不是返回上一级

ni-app关闭页面,而不是返回上一级

作者: 娜娜的简书 | 来源:发表于2021-09-28 10:25 被阅读0次

场景:打开页面A,打开页面B,打开页面C(都是用navigateTo的方法打开),此时要关闭页面A。

痛点:用uni.navigateBack的方法只会基于页面栈返回最顶层页面的上一级,即使此时想关闭B页面(当前页面栈最顶层是C页面),在B页面中执行*uni.navigateBack() *后,只会关闭C页面,返回到B页面。

解决:关B(非顶层页面)时先不关,记录在一个待关闭的变量里边,当关C时(C为最顶层的页面),判断待关闭的页面里有无值,如果有值 ,并且是待关闭页面的上一级页面,此时uni.navigateBack方法的参数delta++,递归判断,直到上一级页面不在待关闭的值中,调运退出方法(如果上边是退出delta为2级)

代码:

utils.js页面中封装:
/**
 *  返回(用于页面交叉关闭)
 *  @param {string} curPageRoute   //当前页面route 
*/
export let returnPage = (curPageRoute) =>{
    let pages = getCurrentPages(); 
    let topPageRoute = pages[pages.length - 1].route;   
    let _setWillClosePage = [].concat(store.getters.getWillClosePage);
    if (topPageRoute == curPageRoute){
        let data = getReturnNumber(pages, _setWillClosePage);
        uni.navigateBack({
            delta: data.returnNumber,
            animationDuration: 0
        }) 
        store.dispatch('setWillClosePageAction',data.setWillClosePage)
    } else { 
        _setWillClosePage.push(curPageRoute)
        store.dispatch('setWillClosePageAction',_setWillClosePage)
    }  
}

/**
 *    要返回的页面级数
*/
let getReturnNumber = (pages, _setWillClosePage, returnNumber = 1) => { 
    let _returnNumber = returnNumber || 1;
    if(_setWillClosePage.length){
        let prePageRoute = pages[pages.length - returnNumber - 1].route;
        let prePageRouteIndex = _setWillClosePage.indexOf(prePageRoute); 
        if(prePageRouteIndex != -1){
            _returnNumber++
            _setWillClosePage.splice(prePageRouteIndex, 1);
            return getReturnNumber(pages, _setWillClosePage, _returnNumber)
        } else {
            return {returnNumber: _returnNumber, setWillClosePage: _setWillClosePage};
        }
    } else {
        return {returnNumber: _returnNumber, setWillClosePage: _setWillClosePage};
    }
}

page.vue页面中使用:

import {  returnPage } from '@/common/utils';
returnPage('你要关闭的页面'); 

相关文章

网友评论

      本文标题:ni-app关闭页面,而不是返回上一级

      本文链接:https://www.haomeiwen.com/subject/oelqnltx.html