美文网首页
uni-app 小程序返回上一页并刷新数据的方法

uni-app 小程序返回上一页并刷新数据的方法

作者: 景彧 | 来源:发表于2022-03-19 21:09 被阅读0次
一.需求:

A页面--push到-->B页面,在B页面完成相关操作后pop返回上一页面A,根据B页面的操作结果控制返回A页面后是否刷新

二.代码
  1. A 页面
<script>
export default {
    data() {
        return {
            refreshIfNeeded: false
        };
    },
    onShow() {
        var pages = getCurrentPages(); // 获取当前页面栈
        var currentPage = pages[pages.length - 1]; // 当前页面
        if (currentPage.data.refreshIfNeeded) {
            currentPage.data.refreshIfNeeded = false;
            this.refreshMethod(); // 当前页面 method中的方法,用来刷新当前页面
        }
    },
    onLoad(option) {

    },
    methods: {
        refreshMethod() {

        }
    }
};
</script>
  1. B 页面
<script>
export default {
    data() {
        return {

        };
    },
    onLoad(option) {

    },
    methods: {
      updateMethod() {
            update(data)
                        .then(res => {
                            console.log('修改信息 POST Success----');
                            uni.showToast({
                                title: '保存成功',
                                icon: 'success'
                            });
                            setTimeout(() => {
                                // 返回上一页并刷新数据方法
                                let pages = getCurrentPages(); // 当前页面
                                let beforePage = pages[pages.length - 2]; // 上一页
                                beforePage.data.refreshIfNeeded = true;
                                // 返回上一页 delta返回的页面数 如果delta大于现有页面数,则返回首页
                                uni.navigateBack({ delta: 1 }); 
                            }, 1000);
                        })
                        .catch(err => {
                            console.log('修改信息 POST Fail----');
                            console.log(err);
                            uni.showToast({
                                title: '保存失败',
                                icon: 'error'
                            });
                        });
        }
    }
};
</script>

相关文章

网友评论

      本文标题:uni-app 小程序返回上一页并刷新数据的方法

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