vue3 uniAPP 单击导航栏图标刷新页面

只能说找内容是真的难找,如果想实现该效果,首先需要在该页面头部导入资源链接

import {
	onTabItemTap
} from "@dcloudio/uni-app";

然后在你亲爱的script部分中导入以下代码即可(当然script部分已经添加了语法糖setup):

onTabItemTap( (e) => {
	console.log("导航栏被点击了:",e);
}) 

执行效果如图所示:

嗯,这就完成了。只能说对于初学者而言,想要实现通过跳转到达导航页实现页面刷新是真的难找....至于某大佬发布的方法

	 uni.switchTab({
        url:'/pages/Dynamic/main',
        success: (res) => {
        	let page = getCurrentPages().pop();
        	if (page == undefined || page == null) return;
        	page.onLoad();
        }
     })

只能说除了页面的console界面来上一句:page.onLoad is not a function之外毛用都没有。

Vue3 和 UniApp 中,可以使用自定义导航栏来实现个性化的导航栏样式和功能。下面是一种实现方式: 1. 在 App.vue 文件中,可以设置全局的导航栏样式和功能。你可以在顶部放置一个自定义的导航栏组件,并设置相应的样式和事件。例如: ```vue <template> <div> <!-- 自定义导航栏 --> <custom-navbar></custom-navbar> <!-- 页面内容 --> <router-view></router-view> </div> </template> <script> import CustomNavbar from '@/components/CustomNavbar.vue'; export default { components: { CustomNavbar, }, }; </script> ``` 2. 创建一个 CustomNavbar.vue 组件,并在其中定义导航栏的样式和事件。例如: ```vue <template> <nav class="custom-navbar"> <div class="left"> <!-- 左侧按钮 --> </div> <div class="title"> <!-- 标题 --> </div> <div class="right"> <!-- 右侧按钮 --> </div> </nav> </template> <script> export default { methods: { // 左侧按钮点击事件 handleLeftClick() { // 处理左侧按钮点击事件 }, // 右侧按钮点击事件 handleRightClick() { // 处理右侧按钮点击事件 }, }, }; </script> <style scoped> .custom-navbar { /* 导航栏样式 */ } .left, .right { /* 左侧和右侧按钮样式 */ } .title { /* 标题样式 */ } </style> ``` 3. 在需要自定义导航栏的页面中,可以通过导入 CustomNavbar 组件来替换全局的导航栏。例如: ```vue <template> <div> <!-- 自定义导航栏 --> <custom-navbar></custom-navbar> <!-- 页面内容 --> <!-- ... --> </div> </template> <script> import CustomNavbar from '@/components/CustomNavbar.vue'; export default { components: { CustomNavbar, }, }; </script> ``` 通过以上步骤,你可以在 Vue3 和 UniApp 中实现自定义导航栏。你可以根据需要自定义导航栏的样式和功能,来满足不同的设计需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值