vant-ui 使用(3)

vant-ui 使用(3)

记录近期所使用vantui组件的过程
使用过程中用到的vant文档
https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#tong-guo-npm-an-zhuang

7.Tab 标签页

标签数量超过 5 个时，标签栏可以在水平方向上滚动，切换时会自动将当前标签居中。

使用

<van-tabs v-model="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>

export default {
  data() {
    return {
      active: 2,
    };
  },
};

1. v-model绑定当前激活标签对应的索引值,默认第一个标签
2. 标签数量超过 5 个时，标签栏可以在水平方向上滚动
3. type切换样式风格 <van-tabs type="card">
4. sticky粘性布局 自动吸顶<van-tabs v-model="active" sticky>
5. swipeable 手势滑动切换

8.List 列表

瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。

使用

List 组件通过loading 和 finished两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。

<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell v-for="item in list" :key="item" :title="item" />
</van-list>

1. loading当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true
2. 下拉加载 业务操作完毕后 记得手动把loading转化成false
3. 数据全部加载完成后 手动设置将finished变成true
4. 当上拉刷新时为了不出现bug 记得把finished设置为false

9.PullRefresh 下拉刷新

用于提供下拉刷新的交互操作
下拉刷新时会触发refresh 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 v-model 设置为 false，表示加载完成。

使用

<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
  <p>刷新次数: {{ count }}</p>
</van-pull-refresh>

import { Toast } from 'vant';

export default {
  data() {
    return {
      count: 0,
      isLoading: false,
    };
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
  },
};

1. pulling-text 下拉过程提示文案
2. loosing-text 释放过程提示文案
3. loading-text 加载过程提示文案
4. success-text 刷新成功后的顶部提示文案
5. v-model是否处于加载中状态 业务操作完成后 手动将v-model值设置为false
6. refresh事件 下拉刷新时触发 回调函数中可以进行同步或异步操作

10.SwipeCell 滑动单元格

可以左右滑动来展示操作按钮的单元格组件。
SwipeCell 组件提供了 left 和 right 两个插槽，用于定义两侧滑动区域的内容。

使用

<van-swipe-cell>
  <template #left>
    <van-button square type="primary" text="选择" />
  </template>
  <van-cell :border="false" title="单元格" value="内容" />
  <template #right>
    <van-button square type="danger" text="删除" />
    <van-button square type="primary" text="收藏" />
  </template>
</van-swipe-cell>

1. left-width 指定左侧滑动区域宽度，单位为px
2. right-width指定右侧滑动区域宽度，单位为px

11.Button 按钮

按钮用于触发一个操作，如提交表单。
按钮支持 default、primary、info、warning、danger五种类型，默认为 default。

使用

<van-button type="primary">主要绿</van-button>
<van-button type="info">信息蓝</van-button>
<van-button type="default">默认白</van-button>
<van-button type="warning">警告橙</van-button>
<van-button type="danger">危险红</van-button>