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

inviewsInside, 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

  1. inviewsInside, createtabbarFolder, and create five files corresponding to tabbar

  1. Then, go torouterUnder the folderrouter.config.jsWrite 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