This is the 19th day of my participation in the Genwen Challenge
rendering
To view the document
Vant’s Tabbar
We’ll go with this one, the one with the custom icon
1. Write the skeleton first
<template> <van-tabbar v-model="active" fixed route active-color= "#6689e2" > <van-tabbar-item v-for="(item, index) in tabbars" :to="item.to" :key="index"> <span>{{ item.title }}</span> <template #icon="props"> <img :src.sync="props.active ? item.image_active : item.image" /> </template> </van-tabbar-item> </van-tabbar> </template>Copy the code
2. Write JS, because it is made into components, so need to separate out
<script lang="ts"> import { defineComponent, PropType, Export interface ITabList {title: string // title to: {name: string} // url path image: String // Initial icon image_active: string // Selected icon} export default defineComponent({name: "TabBar", props: {defaultActive: {type: Number, default: 0}, tabbars: {type: Array as PropType<ITabList[]>, // Type predicate default: () => { return [] } } }, setup(props) { const active = ref(props.defaultActive) return { active } } }) </script>Copy the code
At this point, Tabbar is complete.
Let’s try it out
inviews
Inside, create layout.vue
<! -- layouts --> <template> <div class="app-container"> <div class="layout-content"> <keep-alive v-if="$route.meta.keepAlive"> <router-view></router-view> </keep-alive> <router-view v-else></router-view> </div> <div class="layout-footer" v-if="$route.meta.showTab"> <! -- @change is bound to van-tabbar by default, $attr -> <TabBar :tabbars="tabbars" :defaultActive="defaultActive" @change="handleChange" /> </div> </div> </template> <script lang="ts"> import { computed, defineComponent, reactive, toRefs } from "vue" import TabBar, { ITabList } from "@/components/TabBar.vue" import { useRoute } from "vue-router" import indexPng from '@assets/tabbar/index.png' import indexActivePng from '@assets/tabbar/index-active.png' import etcPng from '@assets/tabbar/etc.png' import etcActivePng from '@/assets/tabbar/etc-active.png' import bbsPng from '@assets/tabbar/bbs.png' import bbsActivePng from '@assets/tabbar/bbs-active.png' import couponPng from '@assets/tabbar/coupon.png' import couponActivePng from '@assets/tabbar/coupon-active.png' import myPng from '@assets/tabbar/my.png' import myActivePng from '@assets/tabbar/my-active.png' interface ILayoutState { tabbars: Array<ITabList> defaultActive: number } export default defineComponent({ name: "layouts", components: { TabBar }, setup() { const route = useRoute(); Const state: ILayoutState = reactive({tabbars: [{title: "页", to: {name: "Index"}, image: indexPng, image_active: IndexActivePng}, {title: "accounting ", to: {name: "Etc"}, image: etcPng, image_active: etcActivePng}, {title:" forum ", to: {name: "Todo"}, image_active: bbsActivePng}, {title: "Coupon", to: {name: "Coupon"},image: CouponPng,image_active: couponActivePng, {title: "My", to: {name: "My"}, image: myPng, image_active: myActivePng } ], defaultActive: computed(() => { return state.tabbars.findIndex((item: ITabList) => { return item.to.name === route.name }) }) }) const handleChange = (v: number) => { console.log("tab value:", v) } return { ... toRefs(state), handleChange } } }); </script>Copy the code
There is a pit here, I don't know why, I just wrote '@/assets/tabbar/index.png', this format will return an error. Import * from ** is the only way to do this. Some friends have the answer to tell me, thank you
Ok, now that the functionality is complete, it’s time to define the router and create the file
- in
views
Inside, createtabbar
Folder, and create five files corresponding to tabbar
- Then, go to
router
Under the folderrouter.config.js
Write the corresponding route inside
import { RouteRecordRaw } from "vue-router"; export const constantRouterMap: Array<RouteRecordRaw> = [ { path: "/", name: "/", component: () => import("@/views/layout.vue"), redirect: "/Index", meta: {title: "frontpage ", keepAlive: false}, children: [{path: "/index", name: "index", Component: () => import("@/views/tabbar/index.vue"), meta: {title:" 内 容 ", keepAlive: false, showTab: true } }, { path: "/etc", name: "Etc", component: () => import("@/views/tabbar/etc.vue"), meta: {title: "keepAlive ", keepAlive: false, showTab: true}}, {path: "/todo", name:" todo", Component: () => import("@/views/tabbar/todo.vue"), meta: {title: "forum ", keepAlive: false, showTab: true}}, {path: "/coupon", component: () => import("@/views/tabbar/ maxiv.vue "), meta: {title: "discount ", keepAlive: false, showTab: true } }, { path: "/my", name: "My", component: () => import("@/views/tabbar/my.vue"), meta: { title: "My ", keepAlive: false, showTab: true}}]Copy the code
A complete tabbar routing package is now available.
Do weigh in hand wrap up work, have don’t understand although ask, I am free will reply of
Big guys, interested can pay attention to my public number duck, now or single digit, wronged…
Lazy people, do not want to map, hope to help you
Public number: small he growth, the Buddha department more text, are their own once stepped on the pit or is learned things
Interested little partners welcome to pay attention to me oh, I was: he Small Life. Everybody progress duck together
Narrative:
- 12 ~ 18K front-end interview will ask what?
- The shift from outsourcing to self-employment | 2021 mid-year summary
Technology,
Chaotic series
- Uniapp Configures ios Universal Link and associate Domains
Vue series
- The same login and registration interface? Teach you to do a cool!
- Vue3’s setup and Ref syntax
- Provide and inject vue3
- Vue3 + vite + vant + typescript – Day 1
- Vue3 + TS Encapsulates request request, storage cache, and Config request information. – The next day
The typescript series
- On day one, data types and vscode work with Typescript
- The next day, interface and Readonly properties
- Typescript Day 3 – Functions
- Typescript Day 4 – Type inference, joint types, and type assertions
- Day 5 – Classes and interfaces
- Day 6 – Generics/generic constraints/Generics with classes and interfaces
- Typescript Day 7 – Type aliases and cross types
- Day 8 – Declaring files, built-in types
The react – native series
- React-native lifecycle details
- [React-native]JSX and RN styles and differences from the Web
- [React -native] Mobx [React -native] Mobx [React -native] Mobx