小程序返回上一頁詳解

一、小程序返回上一頁前提示

當用戶點擊返回按鈕時，如果需要彈窗提示，可以使用uni-app框架提供的返回按鈕的beforeBackEvent函數。代碼如下：

// 在頁面中定義方法
methods: {
    beforeBackEvent: function (e) {
        uni.showModal({
            title: '提示',
            content: '確定要返回上一頁嗎？',
            success: function (res) {
                if (res.confirm) {
                    // 用戶點擊確定，執行返回操作
                    uni.navigateBack({
                        delta: 1
                    });
                } else if (res.cancel) {
                    // 用戶點擊取消，不做任何操作
                    console.log('用戶點擊取消');
                }
            }
        });
    }
},
// 在頁面中定義返回按鈕的config參數
onLoad: function() {
    uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#007aff',
        animation: {
            duration: 400,
            timingFunc: 'easeIn'
        }
    })
    //設置返回按鈕的config
    uni.setNavigationBarColor({
        backgroundColor: '#007aff',
        animation: {
            duration: 400,
            timingFunc: 'easeIn'
        },
        backBtn: true,
        beforeBackEvent: this.beforeBackEvent // beforeBackEvent返回函數
    });
},

二、小程序返回上一頁不刷新數據

小程序返回上一頁時，默認是不刷新數據的，如果需要更新數據，可以在onUnload函數中執行一些操作。代碼如下：

// 上一個頁面的data對象
onUnload: function () {
    var pages = getCurrentPages();//獲取頁面棧
    var prevPage = pages[pages.length - 2];//上一個頁面對象
    //直接調用上一個頁面的setData()方法，把數據存儲到上一個頁面即可
    prevPage.setData({
        message: '你好，小程序'
    })
},

三、小程序返回上一頁會執行onload嗎

小程序返回上一頁時，如果是通過navigateBack或redirectTo跳轉到的頁面，則不會執行onload函數；如果是通過switchTab或navigateTo跳轉到的頁面，則會執行onload函數。

四、小程序返回上一頁事件

小程序返回上一頁時，可以通過uni-app框架提供的navigateBack函數實現。代碼如下：

// 返回上一頁
uni.navigateBack({
    delta: 1
});

五、小程序返回上一頁帶參數

小程序返回上一頁時，帶參數可以使用navigateBack函數的參數query，將參數傳遞到上一頁。代碼如下：

// 上一頁的js代碼
onLoad: function (options) {
    console.log(options.name); // 列印參數name的值
}

// 當前頁面的js代碼
uni.navigateBack({
    delta: 1,
    query: {
        name: 'jack'
    }
});

六、返回上一頁小程序

返回上一頁小程序時，可以使用uni-app框架提供的navigateBackMiniProgram函數實現。代碼如下：

// 返回上一頁小程序
uni.navigateBackMiniProgram({
    extraData: {
        name: 'Jack',
        age: 18
    },
    success: function () {
        console.log('返回上一頁小程序成功');
    }
});

七、小程序返回上一頁更新數據

小程序返回上一頁時，可以更新上一頁的數據，通過uni-app提供的navigateBack函數的delta參數，可以指定返回的頁面數。代碼如下：

// 上一頁的js代碼
onLoad: function () {
    console.log('上一頁的數據已更新');
}

// 當前頁面的js代碼
uni.navigateBack({
    delta: 1
});

八、小程序返回上一頁並執行事件

小程序返回上一頁時，可以同時執行上一頁的某些事件，通過uni-app提供的navigateBack函數的delta參數和animation參數分別指定返回的頁面數和返回動畫。代碼如下：

// 上一頁的js代碼
pageScroll: function () {
    console.log('頁面已滾動');
}

// 當前頁面的js代碼
uni.navigateBack({
    delta: 1,
    animationType: 'slide-out-right',
    animationDuration: 500,
    success: function () {
        // 執行上一頁的pageScroll函數
        var pages = getCurrentPages();//獲取頁面棧
        var prevPage = pages[pages.length - 2];//上一個頁面對象
        prevPage.pageScroll()
    }
});

九、微信小程序返回上一頁彈窗提示

微信小程序返回上一頁時，可以使用wx.showModal彈窗提示用戶。代碼如下：

wx.showModal({
    title: '提示',
    content: '確定要返回上一頁嗎？',
    success: function (res) {
        if (res.confirm) {
            // 用戶點擊確定，執行返回操作
            wx.navigateBack({
                delta: 1
            });
        } else if (res.cancel) {
            // 用戶點擊取消，不做任何操作
            console.log('用戶點擊取消');
        }
    }
});

十、微信小程序返回上一頁調用方法

微信小程序返回上一頁時，可以通過wx.navigateBack函數完成。如果需要調用上一頁的某些方法，可以通過獲取頁面棧的方式獲取到上一頁對象，然後直接調用該對象的方法即可。代碼如下：

// 上一頁的js代碼
Page({
    data: {},
    onLoad: function () {},
    refresh: function () {
        console.log('數據已刷新');
    }
})

// 當前頁面的js代碼
var pages = getCurrentPages();//獲取頁面棧
var prevPage = pages[pages.length - 2];//上一個頁面對象
prevPage.refresh();
wx.navigateBack({
    delta: 1
});