uni-app vue3 setup 如何使用 onShow

在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，你可以按照以下步骤进行操作：

1. 在 src 目录下创建一个名为 components 的文件夹，用于存放自定义组件。

2. 在 components 文件夹中创建一个名为 TabBar.vue 的文件，作为底部 TabBar 的组件。

3. 在 TabBar.vue 文件中，编写底部 TabBar 的模板和样式，例如：

<template>
  <div class="tabbar">
    <!-- 自定义底部 TabBar 的内容 -->
  </div>
</template>

<style scoped>
.tabbar {
  /* 底部 TabBar 的样式 */
}
</style>

4. 在需要使用底部 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>

5. 在 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