feat: 动态渲染底部按钮

罗广辉

2025-10-21 55fb9617fdf794c86fc89476ecbe348b0a61e2cc

feat: 动态渲染底部按钮

 src/hooks/index.js

@@ -5,6 +5,7 @@
import usePermission from "./use-permission"
import useShare from "./use-share"
import useTheme from "./use-theme"
import useTabAddButton from "./useTabAddButton"

export {
  useClipboard,
@@ -13,5 +14,6 @@
  useModal,
  usePermission,
  useShare,
  useTheme
  useTheme,
  useTabAddButton
}

 src/hooks/useTabAddButton.js

New file
@@ -0,0 +1,11 @@
import {onShow} from "@dcloudio/uni-app";

export default function useTabAddButton (visible) {
  onShow(()=>{
    // const tabList = uni.getTabBar().list;
    // uni.setTabBarItem({
    //   index: 2, // Tab 的索引（从0开始）
    //   visible,
    // });
  })
}

 src/pages.json

@@ -168,22 +168,13 @@
        "iconPath": "static/images/tabbar/add-task.svg",
        "selectedIconPath": "static/images/tabbar/add-task.svg",
        "pagePath": "subPackages/taskDetail/addTask/index",
        "text": "",
        "text": "新建",
        "visible": true,
        "style": {
          "width": "600",
          "height": "600"
        }
      },
      {
        "iconPath": "static/images/tabbar/add-work.svg",
        "selectedIconPath": "static/images/tabbar/add-work.svg",
        "pagePath": "subPackages/workDetail/addWork/index",
        "text": "",
        "style": {
          "width": "600",
          "height": "600"
        }
      },
      {
        "iconPath": "static/images/tabbar/icon_home.png",
        "selectedIconPath": "static/images/tabbar/icon_home_selected.png",

 src/pages/inspectionTask/index.vue

@@ -26,6 +26,12 @@
const isApp = ref(false)
onShow(() => {
  isApp.value = true
  uni.setTabBarItem({
    index: 2, // Tab 的索引（从0开始）
    text: '新建任务',
    visible: true,
    "pagePath": "subPackages/taskDetail/addTask/index"
  });
});

onHide(() => {

 src/pages/map/index.vue

@@ -19,7 +19,6 @@
import WebViewPlus from "@/components/WebViewPlus.vue";

const viewUrl = getWebViewUrl("/defaultMap");

const onPostMessage = (data) => {

  if (data.type === "scanCode") {
@@ -42,7 +41,12 @@
      }
};

onLoad(() => {});
onShow(()=>{
  uni.setTabBarItem({
    index: 2, // Tab 的索引（从0开始）
    visible: false,
  })
})
</script>

<style scoped lang="scss">

 src/pages/user/index.vue

@@ -58,6 +58,12 @@
// 登录鉴权，微信小程序端点击tabbar的底层逻辑不触发uni.switchTab，需要在页面onShow生命周期中校验权限
onShow(async () => {
  getDeviceRegion()
  onShow(()=>{
    uni.setTabBarItem({
      index: 2, // Tab 的索引（从0开始）
      visible: false,
    })
  })
  // window.addEventListener('message', (event) => {
  //   console.log('message')
  // })

 src/pages/work/index.vue

@@ -9,6 +9,7 @@
<script setup>
    import {getWebViewUrl} from "@/utils/index.js";
import WebViewPlus from "@/components/WebViewPlus.vue";
  import {useTabAddButton} from "@/hooks/index.js";
const sWebViewRef = ref(null);
const viewUrl = getWebViewUrl('/work', {})
function onPostMessage(data) {
@@ -25,6 +26,12 @@
}
    const isApp = ref(false)
    onShow(() => {
    uni.setTabBarItem({
      index: 2, // Tab 的索引（从0开始）
      text: '新建工单',
      visible: true,
      "pagePath": "subPackages/workDetail/addWork/index"
    });
      isApp.value = true
    });