//插槽组件 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>

- 发布:2023-04-23 11:47
- 更新:2023-04-23 15:20
- 阅读:176
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 22621.1413
HBuilderX类型: 正式
HBuilderX版本号: 3.7.9
手机系统: Android
手机系统版本号: Android 10
手机厂商: 小米
手机机型: 小米11 Ultra
页面类型: vue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
点击按钮触发navigateTo跳转事件。
点击按钮触发navigateTo跳转事件。
预期结果:
回调函数成功触发,并成功跳转至slotText页面,此为事件触发完全成功。
回调函数成功触发,并成功跳转至slotText页面,此为事件触发完全成功。
实际结果:
点击按钮后 跳转回调success 触发成功,但是页面不跳转。且,当打开debug控制台调试时,就可以正常跳转,关闭debug后和云打包的结果都是不能正常跳转。同时,如果我 把目标页面的相关插槽代码注释后 就可以成功跳转过去。 bug加急!!!!!
点击按钮后 跳转回调success 触发成功,但是页面不跳转。且,当打开debug控制台调试时,就可以正常跳转,关闭debug后和云打包的结果都是不能正常跳转。同时,如果我 把目标页面的相关插槽代码注释后 就可以成功跳转过去。 bug加急!!!!!
bug描述:
试图跳转带有插槽的页面,uni.navigateTo 回调函数success 触发成功,但页面视图始终不变。对跳转页面的插槽props内容进行注释,再次尝试跳转可以成功。
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