uniapp之vue3.2 微信小程序开发：路由跳转传参，页面通讯：修改上一页面的数据，监听页面回退传递的数据

场景：最近做的小程序电商模块在确认订单的时候可以修改地址，点击默认地址会跳到地址管理去，点击地址管理中的地址后页面回退把选中的地址传回来，点击默认地址跳到地址管理修改默认地址后回退到确认订单要显示新的默认地址

1.页面跳转 --传递参数允许在地址管理点击地址回退传递参数

const addressFn = () => {
    uni.navigateTo({
        url: "/pages/my/address/index?isBackAddress=true",
    })
}

接收页面跳转传递的参数

import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref } from "vue";
onLoad((options: any) => {
    isBackAddress.value = options.isBackAddress
});
const isBackAddress = ref<boolean>(false)

2.点击返回 --点击列表item返回上一页面通过页面通讯传递点击的item给上一页面

const adddressBackFn = (data: addressListType) => {
    if (!isBackAddress.value) return  //点击是否返回
    let pages = getCurrentPages(); // 当前页面
    let prevPage = pages[pages.length - 2]; // 上一页
    prevPage.$vm.refreshDefaultAddress = true //修改上一页面的值
    setTimeout(() => {
        uni.$emit('UpAddressData', data)//触发自定义事件，附加参数都会传给监听器回调函数
    }, 300)
    uni.navigateBack({//返回上一页面
        delta: 1
    })
}

3.点击左上角返回按钮监听返回--自定义导航栏

// ui 
 <view class="box-bg">
        <uni-nav-bar :border="false" backgroundColor="#F4F5F7" left-icon="left" title="地址管理" @clickLeft="backFn" />
    </view>

//js 获取获取胶囊按钮的高度
const nav_topHeight = ref<string>(uni.getStorageSync('MenuButton').height + 'rpx')

const backFn = () => {
    let pages = getCurrentPages(); // 当前页面
    let prevPage = pages[pages.length - 2]; // 上一页
    if (prevPage.$vm.refreshDefaultAddress) {
        prevPage.$vm.refreshDefaultAddress = false
    }
    uni.navigateBack({//返回上一页面
        delta: 1
    })
}

//css 
.box-bg {
    margin-top: v-bind(nav_topHeight);
}

4.判断值是否被修改，如果被修改那么就用监听修改后的值

onShow(async () => {
    // 判断是否被修改
    if (refreshDefaultAddress.value) {
        uni.$off('UpAddressData')//先销毁一次监听，再进行新的一次监听，否则会出现重复监听的现象
        //监听修改后传递过来的数据   
        uni.$once('UpAddressData', (data => {
            defaultAddress.value = data
        }))
    } else {
        // 请求默认地址
        const res = await RequesApi.AddRessApi({
            "DoType": "5",
            "LanguageType": "zh_Hans_CN"
        })
        defaultAddress.value = res.data.Data[0]
    }
})
const refreshDefaultAddress = ref<boolean>(false)
const defaultAddress = ref<addressListType>() //地址数据
defineExpose({ refreshDefaultAddress }) //把数据暴露出去

uniapp之vue3.2 微信小程序开发：路由跳转传参，页面通讯：修改上一页面的数据，监听页面回退传递的数据

猜你喜欢