mPaaS-技术干货 | 移动端自定义顶部导航栏

Posted 2021-11-05 枯木前头万木春

废话不多说，直接扔代码：

1.通过mPaaS原生方式引入：vant

<dependency component="{ Icon,NavBar }" src="vant/lib" lazy />

或者通过import的方式去引入

import {Icon,NavBar} from"vant/lib";

2.按需引入样式：

import "vant/lib/icon/style";
import "vant/lib/nav-bar/style";

3.自定义导航栏：

<template>
   <!-- 导航栏 -->
    <NavBar @click-left="fan" fixed placeholder z-index="9">
      <template slot="title">
        <p style="font-size: 18px; color: #1e1f22; line-height: 24px">
          新增营销拜访记录
        </p>
      </template>
      <template slot="left">
        <Icon name="arrow-left" size="22" color="#000000" />
      </template>
    </NavBar>
</template>