!7 自定义tabbar

Merge pull request !7 from summer/custom-tabbar

pages.config.ts

@@ -15,6 +15,7 @@ export default defineUniPages({
     },
   },
   tabBar: {
+    custom: true,
     color: '#999999',
     selectedColor: '#018d71',
     backgroundColor: '#F8F8F8',

src/App.vue

@@ -3,6 +3,9 @@ import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
 
 onLaunch(() => {
   console.log('App Launch')
+  // #ifdef H5
+  uni.hideTabBar()
+  // #endif
 })
 onShow(() => {
   console.log('App Show')

src/components/tabbar.vue

@@ -0,0 +1,82 @@
+<template>
+  <view class="tab-bar">
+    <view class="content">
+      <view
+        class="one-tab"
+        v-for="(item, index) in tabBarList"
+        :key="index"
+        @click="selectTabBar(index)"
+      >
+        <view>
+          <view class="tab-img">
+            <image v-if="tabIndex === index" class="img" :src="item.selectedIconPath"></image>
+            <image v-else class="img" :src="item.iconPath"></image>
+          </view>
+        </view>
+        <view v-if="tabIndex === index" class="tit select-texts">{{ item.text }}</view>
+        <view v-else class="tit texts">{{ item.text }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { useTabbarStore } from '@/store/tabbar'
+import { storeToRefs } from 'pinia'
+
+const tabbar = useTabbarStore()
+const { tabBarList, tabIndex } = storeToRefs(tabbar)
+const { setTabIndex } = tabbar
+
+function selectTabBar(index: number) {
+  setTabIndex(index)
+  uni.switchTab({ url: tabBarList.value[index].pagePath })
+}
+</script>
+
+<style lang="scss">
+.tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+  padding-top: 10rpx;
+  padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
+  padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
+  background-color: #f8f8f8;
+
+  .content {
+    display: flex;
+
+    .one-tab {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 50%;
+
+      .tab-img {
+        width: 50rpx;
+        height: 50rpx;
+
+        .img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .tit {
+        font-size: 30rpx;
+        transform: scale(0.7);
+      }
+
+      .select-texts {
+        color: #018d71;
+      }
+
+      .texts {
+        color: block;
+      }
+    }
+  }
+}
+</style>

src/pages.json

@@ -13,6 +13,7 @@
     }
   },
   "tabBar": {
+    "custom": true,
     "color": "#999999",
     "selectedColor": "#018d71",
     "backgroundColor": "#F8F8F8",

src/pages/index/about.vue

@@ -27,6 +27,7 @@
     <view class="desc">测试设计稿样式</view>
     <view class="desc">设计稿是750px，css里面全部写rpx 即可</view>
   </view>
+  <tabbar />
 </template>
 
 <script lang="ts" setup>

src/pages/index/index.vue

@@ -42,6 +42,7 @@
       <!-- #endif -->
     </view>
   </view>
+  <tabbar />
 </template>
 
 <script lang="ts" setup>

src/store/tabbar.ts

@@ -0,0 +1,42 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useTabbarStore = defineStore(
+  'tabbar',
+  () => {
+    interface tabBarItem {
+      iconPath: string
+      selectedIconPath: string
+      pagePath: string
+      text: string
+    }
+    const tabBarList = ref<tabBarItem[]>([
+      {
+        iconPath: '/static/tabbar/home.png',
+        selectedIconPath: '/static/tabbar/homeHL.png',
+        pagePath: '/pages/index/index',
+        text: '首页',
+      },
+      {
+        iconPath: '/static/tabbar/example.png',
+        selectedIconPath: '/static/tabbar/exampleHL.png',
+        pagePath: '/pages/index/about',
+        text: '关于',
+      },
+    ])
+    const tabIndex = ref(0)
+
+    const setTabIndex = (val: number) => {
+      tabIndex.value = val
+    }
+
+    return {
+      tabBarList,
+      tabIndex,
+      setTabIndex,
+    }
+  },
+  {
+    persist: true,
+  },
+)