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切换样式风格
  4. sticky粘性布局 自动吸顶
  5. swipeable 手势滑动切换

8.List 列表

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

使用

List 组件通过loadingfinished两个变量控制加载状态,当组件滚动到底部时,会触发 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 按钮

按钮用于触发一个操作,如提交表单。
按钮支持 defaultprimaryinfowarningdanger五种类型,默认为 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>

你可能感兴趣的:(vant,前端,vue,vue)