8***@qq.com
8***@qq.com
  • 发布:2023-04-23 11:47
  • 更新:2023-04-23 15:20
  • 阅读:176

【报Bug】App端 使用插槽,无法跳转页面。急急急!!!

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 22621.1413

HBuilderX类型: 正式

HBuilderX版本号: 3.7.9

手机系统: Android

手机系统版本号: Android 10

手机厂商: 小米

手机机型: 小米11 Ultra

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
//插槽组件  common.vue  

<template>  
    <view>  
        <view class="title" @click="dosome">  
            <slot name="title"></slot>  
        </view>  
        <view class="content">  
            <slot name="content"></slot>  
        </view>  
        <view class="bottom">  
            <slot name="bottom"></slot>  
        </view>  
    </view>  
</template>  

<script setup>  
let props = defineProps({  
    contentStyle: {  
        type: Object,  
        default () {  
            return {};  
        }  
    },  
    bottom: {  
        type: Boolean,  
        default(){  
            return false;  
        }  
    },  
    background: {  
        type: Object,  
        default () {  
            return {  
                'backgroundColor': '#fff'  
            };  
        }  
    },  
    titleBackground: {  
        type: Object,  
        default () {  
            return {  
                'backgroundColor': '#fff'  
            };  
        }  
    },  
    getBack: {  
        type: Function,  
        default: () => {  
            uni.navigateBack({});  
        }  
    }  
});  

function dosome() {  
    uni.showToast({  
        icon: 'none',  
        title: '你点击了标题'  
    });  
}  
</script>  

<style scoped>  
    .title {  
        padding-top: 2rem;  
    }  
</style>  
==========================================  

//当前的页面   test.vue  

<template>  
    <view class="page flex-col justify-center items-center">  

        <button @click="goNext">跳轉頁面</button>  
    </view>  
</template>  

<script setup>  
function goNext(){  
    console.log('點擊');  
    uni.navigateTo({  
        url:'/pages/slotTest/slotTest',  
        success(res) {  
            console.log('這裡跳轉成功',res);  
        },  
        fail(res) {  
            console.log('這裡跳轉失敗',res);  
        }  
    });  
}  

</script>  

<style scoped>  

    .page {  
        width: 100vw;  
        height: 100vh;  
        display: flex;  
        justify-content: center;  
        align-items: center;  
        background-color: #fff;  
    }  
</style>  
=============================================================  

//将要跳转过去的页面 slotTest.vue  
<template>  
    <commonTest>  
        <template #title>  
            <view>这里是测试插槽用的文字<strong>标题</strong></view>  
        </template>  
        <template #content>  
            hhhhhhh  
        </template>  
        <template #bottom>  
            <view>这里是测试插槽用的文字<strong>底部</strong></view>  
        </template>  
    </commonTest>  
</template>  

<script setup>  
import commonTest from '@/pages/component/common.vue';  

</script>  

<style scoped>  

</style>  

============================================  
//注释掉 props后 能够正常跳转。  
// let props = defineProps({  
//     contentStyle: {  
//         type: Object,  
//         default () {  
//             return {};  
//         }  
//     },  
//     bottom: {  
//         type: Boolean,  
//         default(){  
//             return false;  
//         }  
//     },  
//     background: {  
//         type: Object,  
//         default () {  
//             return {  
//                 'backgroundColor': '#fff'  
//             };  
//         }  
//     },  
//     titleBackground: {  
//         type: Object,  
//         default () {  
//             return {  
//                 'backgroundColor': '#fff'  
//             };  
//         }  
//     },  
//     getBack: {  
//         type: Function,  
//         default: () => {  
//             uni.navigateBack({});  
//         }  
//     }  
// });  

function dosome() {  
    uni.showToast({  
        icon: 'none',  
        title: '你点击了标题'  
    });  
}  
</script>  

<style scoped>  
    .title {  
        padding-top: 2rem;  
    }  
</style>  

操作步骤:

点击按钮触发navigateTo跳转事件。

预期结果:

回调函数成功触发,并成功跳转至slotText页面,此为事件触发完全成功。

实际结果:

点击按钮后 跳转回调success 触发成功,但是页面不跳转。且,当打开debug控制台调试时,就可以正常跳转,关闭debug后和云打包的结果都是不能正常跳转。同时,如果我 把目标页面的相关插槽代码注释后 就可以成功跳转过去。 bug加急!!!!!

bug描述:

试图跳转带有插槽的页面,uni.navigateTo 回调函数success 触发成功,但页面视图始终不变。对跳转页面的插槽props内容进行注释,再次尝试跳转可以成功。

2023-04-23 11:47 负责人:无 分享
已邀请:
8***@qq.com

8***@qq.com (作者) - helloworld

官方快快 看过来!!! 这个bug 很离谱啊 加急!!!

  • yyyttt

    我用的3.7.9,能跳转

    2023-04-23 14:11

  • 8***@qq.com (作者)

    回复 yyyttt: OK,我尝试更新一下。

    2023-04-23 14:14

  • 8***@qq.com (作者)

    回复 8***@qq.com: 更到最新版本了3.7.9,仍然不行。 你是怎么做到的?我一定要开debug 控制台才可以。

    2023-04-23 14:46

8***@qq.com

8***@qq.com (作者) - helloworld

新建了项目,单独测试好像不是插槽的问题。在我的项目中一样的代码,却不能正常跳转,正在重新定位无法跳转的原因。

要回复问题请先登录注册