关于最近项目中使用vant的一些总结

关于最近项目中使用vant的一些总结

最后修改时间:7 months ago

vantUi是有赞团队开发的一款针对于小程序及手机端的一款UI框架 使用时非常方便 但是其中一些bug也很多 把项目中遇到的坑及小tipes分享一下 供自己记忆同时也分享给大家

# 好好读文档 好好读文档 好好读文档 !important

# List 列表

# list列表组件完全是全自动的

自动请求、自动删除loading、页面刷新自动更新。。。 总之在list中你只要做两件事:

  1. 在请求数据== 数据库数据 时给list一个finished状态
  2. 填写你所需要的请求函数
# 重用list导致的bug

在这里插入图片描述 在写如上代码时重用list列表 --导致左右击后每次选择条件onload函数会触发两变 bug分析: 由于每次切换当有的页面加载完成后finished状态会改变, 当其重新开启的时候会触发一次onload函数而我们正常来说也会手动触发一次请求数据 所以在每次请求时候判断一下 finished改变的时候就不要重新手动触发onload函数了 如下:

 if (this.page) {
        sn = 2;
        this.listForMaine = [];
        this.startAt = 0;
        if(this.myFinished){
          this.myFinished= false;
          hasChanged = true
        } 
      } else {
        sn = 1;
        this.listForExmation = [];
        this.startAtExamtion = 0;
        if(this.myExaminationinished){
          // changed
          this.myExaminationinished= false;
          hasChanged = true
        } 
      } 
      if(!hasChanged){
        this.getSourceDate(sn)
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# vant一些内置api也很好用

比如: 在这里插入图片描述 通过ref绑定详细请阅读文档

# vant中的toast等代码形式的样式需要额外引入

如:

import { Toast } from 'vant';
1

然后再使用,否则会报错

# DatetimePicker 时间选择器

这个组件可以精确到分钟 已经很好用了

# Slider 滑块

其中有一个选项可以实现双滑块很舒服 在这里插入图片描述 妈妈再也不让我写原生了

- 全文完 -

留下一条留言?
默认颜色

主题颜色

标准颜色

更多颜色...