uniapp自定义导航和头部

 文章来源地址https://www.toymoban.com/news/detail-489738.html

1.  src/compontents/uni-nav-bar/uni-nav-bar.vue

   <style lang="scss" scoped>
   .navbar {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 1000;
     background-color: #fff;
     color: #333;
     text-align: center;
     &.border {
       border-bottom: 1rpx solid #e2e2e2;
     }
     .navbar-title {
       color: #000;
       font-size: 34rpx;
       font-weight: bold;
       &.left {
         margin-left: 72rpx;
         text-align: left;
       }
     }
     &-icon {
       position: absolute;
       left: 0;
       padding: 0 20rpx;
       .ic {
         font-size: 36rpx;
         color: #0e050a;
       }
     }
   }
   </style>
   
   <template>
     <view
       :class="[{ border: border }, 'navbar']"
       :style="{
         height: height + 'px',
         lineHeight: menuHeight + 'px',
         paddingTop: statusHeight + 'px',
         backgroundColor: bgColor,
         color: textColor
       }"
     >
       <view class="icon navbar-icon" @tap="back()" v-if="showBack || showLeft">
         <i class="ic ic-back" :style="{ color: backIconColor }"></i>
       </view>
       <view
         v-if="pageName"
         :class="[align, 'navbar-title']"
         :style="{
           color: textColor,
           textAlign: align,
           fontSize: textSize
         }"
         >{{ pageName }}</view
       >
     </view>
   </template>
   
   <script setup name="UniNavBar">
   import gData from '@/global'
   import { ref } from 'vue'
   
   defineProps({
     showLeft: {
       // 显示返回箭头
       type: Boolean,
       default: false
     },
     customeClass: String, // 导航栏样式名
     pageName: {
       type: String,
       default: '首页'
     }, // 当前页面标题
     bgColor: {
       type: String,
       default: '#fff'
     }, // 导航栏背景色
     textColor: {
       type: String,
       default: '#000'
     }, // 导航栏标题文字颜色
     align: {
       type: String,
       default: 'center'
     }, // 文字的对齐方式
     backIconColor: String,
     border: {
       type: Boolean,
       default: true
     },
     textSize: {
       type: String,
       default: '34rpx'
     }
   })
   const emit = defineEmits(['backClick'])
   
   const statusHeight = gData.get('statusHeight')
   const height = gData.get('navHeight')
   const menuHeight = gData.get('menuHeight')
   const showBack = ref(false)
   
   if (getCurrentPages().length > 1) {
     showBack.value = true
   }
   
   const back = () => {
     uni.navigateBack()
     emit('backClick')
   }
   </script>
   

2. src/compontents/uni-tab-bar/uni-tab-bar.vue

   <template>
     <view class="footer">
       <!-- 预加载字体 -->
       <view class="YouSheBiaoTiHei ZaoZiGongFangYuanHeiTi FZZongYi-M05S" style="width: 0; height: 0; overflow: hidden">
         <text>11111</text>
       </view>
       <view
         class="tabBar"
         :style="{
           'padding-bottom': bottomArea
         }"
       >
         <view
           v-for="(item, index) in tabBarList"
           :key="item.text"
           :class="[{ active: item.active }, 'tabBar-item']"
           @click="chooseTabBar(index)"
         >
           <view class="tabBar-item-image">
             <text class="icon t-icon" :class="item.active ? item.activeIcon : item.icon"></text>
             <text v-if="item.badge > 0" class="tabBar-badge">
               {{ item.badge }}
             </text>
           </view>
           <text class="tabBar-text">{{ item.text }}</text>
         </view>
       </view>
       <view
         :style="{
           background: bgColor,
           height: 'calc(146rpx)'
         }"
       ></view>
     </view>
   </template>
   
   <script setup name="TabBar">
   import { ref } from 'vue'
   
   defineProps({
     bgColor: {
       // 占位背景
       type: String,
       default() {
         return '#fff'
       }
     }
   })
   
   const tabBarList = ref([
     {
       icon: 'home',
       activeIcon: 'home-active',
       text: '首页',
       badge: 0,
       active: true,
       url: '/pages/home/index'
     },
     {
       icon: 'mine',
       activeIcon: 'mine-active',
       text: '我的',
       badge: 0,
       active: false,
       url: '/pages/mine/index'
     }
   ])
   const bottomArea = ref('0px')
   
   uni.getSystemInfo({
     success: res => {
       bottomArea.value = res.safeAreaInsets.bottom - 4 + 'px'
     }
   })
   
   const getCurrentPage = () => {
     const pageList = getCurrentPages()
     const currentPage = pageList[pageList.length - 1]
     const url = '/' + currentPage.route
     tabBarList.value.forEach(item => {
       item.active = item.url === url
     })
   }
   getCurrentPage()
   
   const chooseTabBar = index => {
     uni.switchTab({
       url: tabBarList.value[index].url
     })
   }
   </script>
   
   <style lang="scss">
   .t-icon {
     display: inline-block;
     width: 1em;
     height: 1em;
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100%;
   }
   
   .home {
     background: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%27100%25%27%20height%3D%27100%25%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22iconshouye%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20d%3D%22M511.63%20138.22c15.98%200%2031.39%205.28%2042.27%2014.49l2.36%202%202.54%201.76%20316.92%20219.58c13.04%2012.1%2020.46%2028.86%2020.46%2046.4v399.06c-0.09%2035.12-28.98%2063.7-64.42%2063.7H191.75c-35.52%200-64.42-28.5-64.42-63.54V422.42c-0.01-17.64%207.38-34.39%2020.36-46.35l317.02-219.58%202.66-1.84%202.46-2.1c10.65-9.11%2025.89-14.33%2041.8-14.33m0-64c-30.16%200-60.25%209.9-83.37%2029.65L108.22%20325.55c-28.51%2024.2-44.92%2059.62-44.89%2096.91v399.21c0%2070.32%2057.6%20127.54%20128.42%20127.54h640.01c70.8%200%20128.25-57.05%20128.42-127.54V422.46c0-37.17-16.34-72.45-44.9-96.85L595.25%20103.87c-23.37-19.78-53.53-29.65-83.62-29.65z%22%20fill%3D%22%239196B0%22%20%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M664.8%20709.5H358.61c-18.12%200-32.81%2014.33-32.81%2032s14.69%2032%2032.81%2032H664.8c18.12%200%2032.81-14.33%2032.81-32s-14.7-32-32.81-32z%22%20fill%3D%22%239196B0%22%20%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
   }
   
   .home-active {
     background: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%27100%25%27%20height%3D%27100%25%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22icona-shouyexuanze%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20d%3D%22M511.88%2074.38c-30.16%200-60.25%209.9-83.37%2029.65L108.47%20325.71c-28.51%2024.2-44.92%2059.62-44.89%2096.91v399.21c0%2070.32%2057.6%20127.54%20128.42%20127.54h640.01c70.8%200%20128.25-57.05%20128.42-127.54V422.62c0-37.17-16.34-72.45-44.9-96.85L595.49%20104.03c-23.36-19.78-53.53-29.65-83.61-29.65z%22%20fill%3D%22%23FF0024%22%20%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M665.04%20709.66H358.86c-18.12%200-32.81%2014.33-32.81%2032s14.69%2032%2032.81%2032h306.19c18.12%200%2032.81-14.33%2032.81-32s-14.71-32-32.82-32z%22%20fill%3D%22%23FFFFFF%22%20%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
   }
   .mine {
     background: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%27100%25%27%20height%3D%27100%25%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22iconwode%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20d%3D%22M512%20128.16c42.84%200%2084.36%208.37%20123.42%2024.87%2037.75%2015.95%2071.66%2038.8%20100.8%2067.91s52%2062.98%2067.96%20100.69c16.51%2039%2024.88%2080.46%2024.88%20123.24s-8.37%2084.24-24.88%20123.24c-15.96%2037.71-38.83%2071.58-67.96%20100.69-29.14%2029.11-63.05%2051.96-100.8%2067.91-39.06%2016.5-80.58%2024.87-123.42%2024.87s-84.36-8.37-123.42-24.87c-37.75-15.95-71.66-38.8-100.8-67.91s-52-62.98-67.96-100.69c-16.51-39-24.88-80.46-24.88-123.24s8.37-84.24%2024.88-123.24c15.96-37.71%2038.83-71.58%2067.96-100.69%2029.14-29.11%2063.05-51.96%20100.8-67.91%2039.06-16.51%2080.58-24.87%20123.42-24.87m0-63.94c-210.42%200-381%20170.42-381%20380.65s170.58%20380.65%20381%20380.65S893%20655.1%20893%20444.87%20722.42%2064.22%20512%2064.22z%22%20fill%3D%22%23969AB3%22%20%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M635.27%20333.16c-17.65%200-31.97%2015.05-31.97%2033.62v89.65c0%2018.57%2014.31%2033.62%2031.97%2033.62%2017.65%200%2031.97-15.05%2031.97-33.62v-89.65c-0.01-18.56-14.32-33.62-31.97-33.62zM411.15%20333.16c-17.65%200-31.97%2015.05-31.97%2033.62v89.65c0%2018.57%2014.31%2033.62%2031.97%2033.62s31.97-15.05%2031.97-33.62v-89.65c-0.01-18.56-14.32-33.62-31.97-33.62zM820.37%20959.35c-12.89%200-25.03-7.85-29.88-20.61-24.97-65.63-72.59-120.65-134.1-154.95-15.42-8.6-20.95-28.07-12.36-43.49%208.6-15.42%2028.07-20.95%2043.49-12.35C762.15%20769.56%20819.93%20836.34%20850.24%20916c6.28%2016.5-2.01%2034.97-18.51%2041.24a31.53%2031.53%200%200%201-11.36%202.11zM201.88%20959.35c-3.78%200-7.62-0.67-11.36-2.1-16.5-6.28-24.79-24.74-18.51-41.24%2030.12-79.17%2087.47-145.71%20161.47-187.35%2015.38-8.66%2034.88-3.2%2043.53%2012.18%208.66%2015.39%203.2%2034.88-12.18%2043.53-61%2034.33-108.26%2089.15-133.07%20154.37-4.85%2012.77-16.99%2020.61-29.88%2020.61z%22%20fill%3D%22%23969AB3%22%20%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
   }
   
   .mine-active {
     background: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%27100%25%27%20height%3D%27100%25%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22icona-wodexuanze%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20d%3D%22M512%2064.22c-210.42%200-381%20170.42-381%20380.65s170.58%20380.65%20381%20380.65S893%20655.1%20893%20444.87%20722.42%2064.22%20512%2064.22z%22%20fill%3D%22%23FF0024%22%20%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M635.27%20333.16c-17.65%200-31.97%2015.05-31.97%2033.62v89.65c0%2018.57%2014.31%2033.62%2031.97%2033.62%2017.65%200%2031.97-15.05%2031.97-33.62v-89.65c-0.01-18.56-14.32-33.62-31.97-33.62zM411.15%20333.16c-17.65%200-31.97%2015.05-31.97%2033.62v89.65c0%2018.57%2014.31%2033.62%2031.97%2033.62s31.97-15.05%2031.97-33.62v-89.65c-0.01-18.56-14.32-33.62-31.97-33.62z%22%20fill%3D%22%23FFFFFF%22%20%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M863.85%20960.22C825.58%20800.61%20681.94%20681.98%20510.6%20681.98c-171.1%200-314.58%20118.3-353.09%20277.57l706.34%200.67z%22%20fill%3D%22%23FF0024%22%20%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
   }
   
   .footer {
     height: 146rpx;
     width: 100%;
     .tabBar {
       position: fixed;
       bottom: 0;
       height: 146rpx;
       background: #fefefe;
       border-top: 1rpx solid #e2e2e2;
       width: 100%;
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 40rpx 63rpx 27rpx 68rpx;
       .tabBar-item {
         width: 70rpx;
         text-align: center;
         .tabBar-item-image {
           position: relative;
           height: 42rpx;
           .icon {
             font-size: 42rpx;
             height: 42rpx;
             line-height: 42rpx;
           }
           .tabBar-badge {
             position: absolute;
             right: 0;
             top: -25%;
             width: 30rpx;
             height: 30rpx;
             background: #ff1e1e;
             border-radius: 50%;
             font-family: PingFang SC;
             font-weight: 500;
             color: #ffffff;
             font-size: 20rpx;
             text-align: center;
           }
         }
         .tabBar-text {
           margin-top: 6rpx;
           height: 23rpx;
           font-size: 24rpx;
           white-space: nowrap;
           color: #9297b1;
         }
         &.active {
           .tabBar-text {
             font-weight: bold;
             color: #ff0024;
           }
         }
       }
     }
   }
   </style>
   

3. src/layout/index.vue

   <style lang="scss">
   .layout-container {
     min-height: 100vh;
     background-color: #fff;
     overflow: auto;
   }
   </style>
   
   <template>
     <view class="layout-container" :style="{ paddingTop: top + 'px', backgroundColor: bgColor }">
       <uni-nav-bar
         :border="border"
         :pageName="pageName"
         :backIconColor="backIconColor"
         :bgColor="navColor"
         :textColor="textColor"
         :align="align"
       />
       <slot></slot>
       <uni-tab-bar style="z-index: 99" />
     </view>
   </template>
   
   <script setup name="Layout">
   import gData from '@/global'
   
   defineProps({
     pageName: String,
     bgColor: String,
     navColor: String,
     border: {
       type: Boolean,
       default: true
     },
     backIconColor: String,
     textColor: String,
     align: String
   })
   
   const top = gData.get('navHeight')
   </script>
   

4. src/pages/home/index.vue

   <style lang="scss">
   .layout-container {
     min-height: 100vh;
     background-color: #fff;
     overflow: auto;
   }
   </style>
   
   <template>
     <view class="layout-container" :style="{ paddingTop: top + 'px', backgroundColor: bgColor }">
       <uni-nav-bar
         :border="border"
         :pageName="pageName"
         :backIconColor="backIconColor"
         :bgColor="navColor"
         :textColor="textColor"
         :align="align"
       />
       <slot></slot>
       <uni-tab-bar style="z-index: 99" />
     </view>
   </template>
   
   <script setup name="Layout">
   import gData from '@/global'
   
   defineProps({
     pageName: String,
     bgColor: String,
     navColor: String,
     border: {
       type: Boolean,
       default: true
     },
     backIconColor: String,
     textColor: String,
     align: String
   })
   
   const top = gData.get('navHeight')
   </script>
   

5. src/pages/mine/index.vue

   <style lang="scss" scoped></style>
   
   <template>
     <LayoutPage page-name="我的">
       <view class="mine-block"> 我的我的我的我的 </view>
     </LayoutPage>
   </template>
   
   <script>
   export default {
     name: 'MinePage',
     onShow() {
       // 双重保险
       uni.hideTabBar({
         animation: false
       })
     }
   }
   </script>
   

6. App.vue

   <script>
   import { defineComponent } from 'vue'
   import gbData from '@/global'
   export default defineComponent({
     onLaunch() {
       console.log('App Launch')
       // 全局设置状态栏、胶囊按钮、自定义顶部导航栏的高度
       const menuData = uni.getMenuButtonBoundingClientRect()
       uni.getSystemInfo({
         success: res => {
           const navPadding = menuData.top - res.statusBarHeight
           const navHeight = res.statusBarHeight + navPadding * 2 + menuData.height
           const menuHeight = menuData.height + navPadding * 2
           const tabHeight = res.screenHeight - res.windowHeight
           gbData.set('statusHeight', res.statusBarHeight) // 状态栏的高度
           gbData.set('menuHeight', menuHeight) // 胶囊按钮所在的顶部导航的高度
           gbData.set('navHeight', navHeight) // 整个顶部导航栏的高度
           gbData.set('tabHeight', tabHeight) // 底部tabbar的高度
         }
       })
     },
     onShow() {
       console.log('App Show')
     },
     onHide() {
       console.log('App Hide')
     }
   })
   </script>
   
   <style>
   /*每个页面公共css */
   </style>
   

7. global.js

   'use strict'
   
   const globalData = {
     set: (path, value, api) => {
       path && (globalData[path] = value)
       return true
     },
     get: path => {
       return path ? globalData[path] : globalData
     },
     delete: path => {
       delete globalData[path]
       return true
     }
   }
   
   export default globalData
   

8. main.js

   import { createSSRApp } from 'vue'
   import App from '@/App.vue'
   import store from '@/store'
   import Layout from '@/layout'
   import '@/static/styles/_index.scss'
   
   export function createApp() {
     const app = createSSRApp(App)
     app.use(store)
     app.component('LayoutPage', Layout)
     return {
       app
     }
   }
   

9. page.json

   {
     "pages": [
       {
         "path": "pages/home/index",
         "style": {
           "navigationBarTitleText": "首页",
           "navigationStyle": "custom"
         }
       },
       {
         "path": "pages/mine/index",
         "style": {
           "navigationBarTitleText": "我的",
           "navigationBarBackgroundColor":"#F5F7F9",
           "navigationStyle": "custom"
         }
       }
     ],
     "globalStyle": {
       "navigationBarBackgroundColor": "#6477F4",
       "navigationBarTextStyle":"white"
     },
     "tabBar": {
       "color": "#9297B1",
       "selectedColor": "#6175F4",
       "borderStyle": "black",
       "backgroundColor": "#FFFFFF",
       "list": [{
         "pagePath": "pages/home/index",
         "text": "首页"
       },
         {
           "pagePath": "pages/mine/index",
           "text": "我的"
         }
       ]
     }
   }
   

   习惯文件

10. .eslintrc.js

    /**
     * 规则的值
     * ‘off’ 或 0：关闭对该规则的校验；
     * ‘warn’ 或 1：启用规则，不满足时抛出警告，不会退出编译进程；
     * ‘error’ 或 2：启用规则，不满足时抛出错误，会退出编译进程；
     * 如果某项规则，有额外的选项，可以通过数组进行传递，数组的第一位必须是错误级别。
     * 如 ‘semi’: [‘error’, ‘never’], never就是额外的配置项
     */
    module.exports = {
      root: true,
      parserOptions: {
        parser: 'babel-eslint',
        sourceType: 'module'
      },
      env: {
        browser: true,
        node: true,
        es6: true,
        'vue/setup-compiler-macros': true
      },
      extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier'],
      plugins: ['prettier'],
      rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'prettier/prettier': 'error',
        'no-tabs': 'off',
        'no-irregular-whitespace': 'off',
        'vue/max-attributes-per-line': [
          'warn',
          {
            singleline: {
              max: 10
            },
            multiline: {
              max: 1
            }
          }
        ],
        'vue/singleline-html-element-content-newline': 'off',
        'vue/multiline-html-element-content-newline': 'off',
        'vue/name-property-casing': ['error', 'PascalCase'],
        'vue/no-v-html': 'off',
        'accessor-pairs': 2,
        'arrow-spacing': [
          2,
          {
            before: true,
            after: true
          }
        ],
        'block-spacing': [2, 'always'],
        'brace-style': [
          2,
          '1tbs',
          {
            allowSingleLine: true
          }
        ],
        camelcase: [
          0,
          {
            properties: 'always'
          }
        ],
        'comma-dangle': [2, 'never'],
        'comma-spacing': [
          2,
          {
            before: false,
            after: true
          }
        ],
        'comma-style': [2, 'last'],
        'constructor-super': 2,
        curly: [2, 'multi-line'],
        'dot-location': [2, 'property'],
        'eol-last': 2,
        eqeqeq: ['error', 'always', { null: 'ignore' }],
        'generator-star-spacing': [
          2,
          {
            before: true,
            after: true
          }
        ],
        'handle-callback-err': [2, '^(err|error)$'],
        indent: [
          2,
          2,
          {
            SwitchCase: 1
          }
        ],
        'jsx-quotes': [2, 'prefer-single'],
        'key-spacing': [
          2,
          {
            beforeColon: false,
            afterColon: true
          }
        ],
        'keyword-spacing': [
          2,
          {
            before: true,
            after: true
          }
        ],
        'new-cap': [
          2,
          {
            newIsCap: true,
            capIsNew: false
          }
        ],
        'new-parens': 2,
        'no-array-constructor': 2,
        'no-caller': 2,
        'no-class-assign': 2,
        'no-cond-assign': 2,
        'no-const-assign': 2,
        'no-control-regex': 0,
        'no-delete-var': 2,
        'no-dupe-args': 2,
        'no-dupe-class-members': 2,
        'no-dupe-keys': 2,
        'no-duplicate-case': 2,
        'no-empty-character-class': 2,
        'no-empty-pattern': 2,
        'no-eval': 2,
        'no-ex-assign': 2,
        'no-extend-native': 2,
        'no-extra-bind': 2,
        'no-extra-boolean-cast': 2,
        'no-extra-parens': [2, 'functions'],
        'no-fallthrough': 2,
        'no-floating-decimal': 2,
        'no-func-assign': 2,
        'no-implied-eval': 2,
        'no-inner-declarations': [2, 'functions'],
        'no-invalid-regexp': 2,
        'no-iterator': 2,
        'no-label-var': 2,
        'no-labels': [
          2,
          {
            allowLoop: false,
            allowSwitch: false
          }
        ],
        'no-lone-blocks': 2,
        'no-mixed-spaces-and-tabs': 0,
        'no-multi-spaces': 2,
        'no-multi-str': 2,
        'no-multiple-empty-lines': [
          2,
          {
            max: 1
          }
        ],
        'no-native-reassign': 2,
        'no-negated-in-lhs': 2,
        'no-new-object': 2,
        'no-new-require': 2,
        'no-new-symbol': 2,
        'no-new-wrappers': 2,
        'no-obj-calls': 2,
        'no-octal': 2,
        'no-octal-escape': 2,
        'no-path-concat': 2,
        'no-proto': 2,
        'no-redeclare': 2,
        'no-regex-spaces': 2,
        'no-return-assign': [2, 'except-parens'],
        'no-self-assign': 2,
        'no-self-compare': 2,
        'no-sequences': 2,
        'no-shadow-restricted-names': 2,
        'no-spaced-func': 2,
        'no-sparse-arrays': 2,
        'no-this-before-super': 2,
        'no-throw-literal': 2,
        'no-trailing-spaces': 2,
        'no-undef': 2,
        'no-undef-init': 2,
        'no-unexpected-multiline': 2,
        'no-unmodified-loop-condition': 2,
        'no-unneeded-ternary': [
          2,
          {
            defaultAssignment: false
          }
        ],
        'no-unreachable': 2,
        'no-unsafe-finally': 2,
        'no-unused-vars': [
          2,
          {
            vars: 'all',
            args: 'none'
          }
        ],
        'no-useless-call': 2,
        'no-useless-computed-key': 2,
        'no-useless-constructor': 2,
        'no-useless-escape': 0,
        'no-whitespace-before-property': 2,
        'no-with': 2,
        'one-var': [
          2,
          {
            initialized: 'never'
          }
        ],
        'operator-linebreak': [
          2,
          'after',
          {
            overrides: {
              '?': 'before',
              ':': 'before'
            }
          }
        ],
        'padded-blocks': [2, 'never'],
        quotes: [
          2,
          'single',
          {
            avoidEscape: true,
            allowTemplateLiterals: true
          }
        ],
        semi: [2, 'never'],
        'semi-spacing': [
          2,
          {
            before: false,
            after: true
          }
        ],
        'space-before-blocks': [2, 'always'],
        'space-before-function-paren': [2, 'never'],
        'space-in-parens': [2, 'never'],
        'space-infix-ops': 2,
        'space-unary-ops': [
          2,
          {
            words: true,
            nonwords: false
          }
        ],
        'spaced-comment': [
          2,
          'always',
          {
            markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
          }
        ],
        'template-curly-spacing': [2, 'never'],
        'use-isnan': 2,
        'valid-typeof': 2,
        'wrap-iife': [2, 'any'],
        'yield-star-spacing': [2, 'both'],
        yoda: [2, 'never'],
        'prefer-const': 2,
        'object-curly-spacing': [
          2,
          'always',
          {
            objectsInObjects: false
          }
        ],
        'array-bracket-spacing': [2, 'never']
      },
      globals: {
        uni: true,
        wx: true
      }
    }
    

11. .prettierrc.js

    module.exports = {
      printWidth: 120, // 一行最多 120 字符(默认80)
      tabWidth: 2, // 每个tab相当于多少个空格（默认2）
      useTabs: false, // 是否使用tab进行缩进（默认false）
      semi: false, // 行尾需要有分号(默认true)
      singleQuote: true, // 使用单引号（默认false）
      quoteProps: 'as-needed', // 对象的 key 仅在必要时用引号
      jsxSingleQuote: false, // jsx 不使用单引号，而使用双引号
      trailingComma: 'none', // 多行使用拖尾逗号（默认none）
      bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"（默认true）
      jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
      htmlWhitespaceSensitivity: 'css', // 根据显示样式决定 html 要不要折行
      arrowParens: 'avoid', // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid:添加括号）
      endOfLine: 'auto' // 行尾换行符
    }
    

12. .gitignore忽略文件

    .DS_Store
    node_modules
    /dist
    /src/unpackage
    /src/.hbuilderx
    
    
    # local env files
    .env.local
    .env.*.local
    
    # Log files
    npm-debug.log*
    yarn-debug.log*
    yarn-error.log*
    pnpm-debug.log*
    
    # Editor directories and files
    .idea
    .vscode
    *.suo
    *.ntvs*
    *.njsproj
    *.sln
    *.sw?
    

到了这里，关于uniapp自定义导航和头部的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！