@Vant简介

• Vant是一个轻量、可靠的移动端 Vue 组件库；
• 专用于开发O手机H5页面；
• 我们在使用它的同时，更要学习人家的组件封装和设计思想；
• Vant4官方文档

@安装与导入

安装Vant

npm i vant

按需注册要使用的Vant组件

main.js

// 1. 引入你需要的组件
import { Button, NavBar, Icon, Sticky, Tabs, Tab, Loading } from "vant";

// 2. 引入组件样式(一定要引入在自己的样式之前，以方便我们自己的样式去覆盖它)
import "vant/lib/index.css";

// 引入自己的其它css模块
...

const app = createApp(App);

// 3. 注册你需要的组件
app.use(Button);
app.use(NavBar);
app.use(Icon);
app.use(Sticky);
app.use(Tabs);
app.use(Tab);
app.use(Loading);

@学习查看第三方文档

没有什么是比看文档更重要的能力了！

---

@Icon图标

• 看上哪个图标了从文档里拷一下代码过来即可
• Icon文档懒人链接

<!-- 点击toggle按钮时 动态切换hideSynopsis的真假 -->
<div
   class="toggle"
   @click="hideSynopsis = !hideSynopsis">

   <!-- 隐藏时使用↓图标 -->
   <i
      v-if="hideSynopsis"
      class="fa fa-angle-down"
      style="font-size: 20px"></i>

   <!-- 展开时使用↑图标 -->
   <i
      v-else
      class="fa fa-angle-up"
      style="font-size: 20px"></i>
</div>

完成效果

@NavBar导航栏

拷贝一个蓝本效果

按自己的需求改造一下

• 会看文档才知道怎么改！
• 这里用到了另外一个吸顶 / 粘性布局组件 Sticky

   <!-- 让导航栏在滚动时吸顶 -->
   <van-sticky>

      <van-nav-bar v-show="!$route.meta.hideTitle">

         <!-- 覆盖左侧区域：广州+↓，点击跳转城市选择页 -->
         <template #left>
            <!-- 点击切换路由/cities -->
            <div
               v-if="$route.meta.isTabPage"
               @click="$router.push('/cities')">
               <span style="margin-right: 5px">广州</span>
               <van-icon
                  name="arrow-down"
                  color="#999"
                  size="12" />
            </div>

            <!-- X 点击时返回上一个路径 -->
            <div
               v-else
               @click="$router.back">
               <van-icon
                  color="#999"
                  name="cross"
                  size="20" />
            </div>
         </template>

         <!-- 覆盖title区域：自定义title样式和文本 -->
         <!-- 将当前路由元信息中的title作为title -->
         <template #title>
            <span style="font-weight: normal; font-size: 16px">{{ $route.meta.title }}</span>
         </template>

         <!-- 覆盖右侧区域：使用放大镜图标 -->
         <template #right>
            <van-icon
               color="#999"
               name="search"
               size="20" />
         </template>

      </van-nav-bar>
   </van-sticky>

完成效果

@Tabs标签栏

Tabs文档

拷贝Tabs基础用法

<van-tabs v-model:active="active">
  <van-tab title="标签 1">内容 1</van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
  <van-tab title="标签 4">内容 4</van-tab>
</van-tabs>

对照文档加以改造

此处修改了tab的文字、样式、和点击事件

<van-sticky>
     <van-tabs
        line-width="60px"
        line-height="1px"
        title-active-color="#ff5f16"
        color="#ff5f16"
        @click-tab="onClickTab">
        <van-tab title="正在热映"></van-tab>
        <van-tab title="即将上映"></van-tab>
     </van-tabs>
</van-sticky>

点击事件

methods: {
  onClickTab({ name }) {
     console.log("onClickTab", name);

     /* 根据序号跳转不同的页面 */
     if (name === 0) {
        this.$router.push("/film/nowPlaying");
     } else {
        this.$router.push("/film/comingSoon");
     }
  },
},

完成效果

@Loading正在加载

Loading文档

拷贝一个蓝本

<van-loading type="spinner" />

在数据加载过程中使用

   <div>
      <!-- 没有获取到数据时显示loading -->
      <van-loading
         v-if="!films"
         size="24px"
         >加载中...</van-loading
      >

      <!-- 否则显示数据 -->
      <ul v-else>
         <!-- key的作用：通过一个item的唯一标识提升大列表的渲染性能 -->
         <FilmItem
            v-for="film in films"
            :key="film.filmId"
            :item="film"></FilmItem>
      </ul>
   </div>

修改样式

• 其选择器的名字为在浏览器中调试时获取到的
• 尝试覆盖！好使！

.van-loading {
   text-align: center;
   background-color: rgba(0, 0, 0, 0.05);
   height: 40px;
   line-height: 40px;
}

完成效果

---

😈 点赞收藏加关注了吗就走？！

本项目源码 watch,follow,fork！！！

祝大家撸码愉快~