技术支持::天空网络-临汾做网站资源网站优化排名软件公司
在uni-app中，onShow是uni.onAppShow的别名，用于监听当前小程序被用户切换到前台运行时触发。在Vue 3中，你可以通过以下方式使用onShow：
在页面的vue文件中添加onShow方法：
javascript
<button @click=“onShow”>点击触发onShow
在mounted生命周期钩子中调用onShow方法，将onShow方法作为回调函数传递给onShow。这样，当小程序被切换到前台运行时，onShow方法会被触发并执行相应的代码。
请注意，onShow方法只会在小程序被切换到前台运行时触发，如果小程序一直处于前台运行状态，则不会触发该方法。
更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。
uniapp vue3 setup 如何 自定义底部tabba
在 UniApp 中使用 Vue 3 的 setup 函数自定义底部 TabBar，你可以按照以下步骤进行操作：
-
在
src目录下创建一个名为components的文件夹，用于存放自定义组件。 -
在
components文件夹中创建一个名为TabBar.vue的文件，作为底部 TabBar 的组件。 -
在
TabBar.vue文件中，编写底部 TabBar 的模板和样式，例如：
<template><div class="tabbar"><!-- 自定义底部 TabBar 的内容 --></div>
</template><style scoped>
.tabbar {/* 底部 TabBar 的样式 */
}
</style>
- 在需要使用底部 TabBar 的页面中，引入并注册
TabBar组件。假设你的页面是Home.vue，可以将以下代码添加到Home.vue文件中：
<template><div><!-- 页面内容 --></div><TabBar/> <!-- 引入底部 TabBar 组件 -->
</template><script>
import TabBar from '@/components/TabBar.vue' // 引入 TabBar 组件export default {components: {TabBar // 注册 TabBar 组件},// 其他代码...
}
</script>
- 在
setup函数中进行底部 TabBar 的配置。在Home.vue文件中，使用setup函数来自定义底部 TabBar 的相关配置，例如：
<script>
import { ref } from 'vue'export default {setup() {// 定义底部 TabBar 的数据const tabBarItems = ref([{ title: '首页', icon: 'home', url: '/home' },{ title: '分类', icon: 'category', url: '/category' },{ title: '购物车', icon: 'cart', url: '/cart' },{ title: '我的', icon: 'user', url: '/user' },])// 处理底部 TabBar 点击事件const handleTabBarClick = (index) => {// 处理底部 TabBar 点击后的逻辑}// 返回底部 TabBar 配置和点击事件return {tabBarItems,handleTabBarClick}},// 其他代码...
}
</script>
在 setup 函数中，你可以定义一个 ref 变量用来存放底部 TabBar 的数据（例如标题、图标、链接等），并且可以定义一个处理点击事件的函数。然后将这些数据和函数通过 return 语句返回，以便在模板中使用。
注意：以上代码仅为示例，您需要根据实际需求进行调整和完善。
最后，根据你自己的业务需求，在 TabBar.vue 中使用 tabBarItems 和 handleTabBarClick 来展示底部 TabBar 的内容和处理点击事件。
参考文档
- https://blog.csdn.net/weixin_43340308/article/details/127055272
- https://blog.csdn.net/weixin_45785873/article/details/115202941
- https://blog.csdn.net/weixin_55853065/article/details/127616045
- https://blog.csdn.net/weixin_50606255/article/details/120054940
- https://blog.csdn.net/qq_40745143/article/details/120669298