Vant(Vue2)使用

发表于 | 分类于
日期格式化Moment、日历、下拉刷新与加载更多

前言

官网 https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

加载中

1
2
3
4
5
6
7
8
Toast.loading({
    message: '加载中...',
    duration: 0, // 持续展示 toast
    forbidClick: true,
    loadingType: 'spinner'
})

Toast.clear()

Moment.js

Moment.js 是我用过的最好用的操作时间的工具库。它使得操作时间变得很简单。

1
npm install moment --save

引用

1
import moment from 'moment'

创建

1
2
3
4
5
6
moment() // 当前时间
moment("1995-12-25") // 1995-12-25
moment("12-25-1995", "MM-DD-YYYY") // 1995-12-25
moment({ year :2010, month :3, day :5, hour :15, minute :10, second :3, millisecond :123})
moment(Date.now() - 24 * 60 * 60 * 1000) // 昨天
moment(new Date(2011, 9, 16)) // 2011-10-16

格式化

1
2
3
4
moment(date).format('YYYY-MM-DD HH:mm:ss')
moment().format('YYYY年MM月DD日 HH:mm:ss') // 2016年11月11日 22:05:19
moment().format('hh:m:ss') // 10:5:19
moment().format('[YYYY]') // "YYYY"。[] 里的会原样输出。

转化成 Date 对象

1
moment().toDate()

获取/设置时间信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
moment().second() //获得 秒
moment().second(Number) //设置 秒。0 到 59
moment().minute() //获得 分
moment().minute(Number) //设置 分。0 到 59
// 类似的用法
moment().hour() // 小时
moment().date() // 一个月里的第几天
moment().day() // 星期几
moment().dayOfYear() // 一年里的第几天
moment().week() // 一年里的第几周
moment().month() // 第几个月
moment().quarter() // 一年里的第几个季度
moment().year() // 年
moment().daysInMonth() // 当前月有多少天

操作

1
2
3
4
5
6
7
8
9
moment().add(7, 'days') // 之后的第7天。第2个参数还可以是 'months', 'years' 等。注意是复数。
moment().add(7, 'd'）// 与上面一行代码的运行结果一样。
moment().subtract(1, 'months') // 上个月

moment().startOf('week') // 这周的第一天
moment().startOf('hour') // 等效与 moment().minutes(0).seconds(0).milliseconds(0)。
// 还支持 'year'，'month' 等

moment().endOf('week')

查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 早于
moment('2010-10-20').isBefore('2010-10-21') // true
moment('2010-10-20').isBefore('2010-12-31', 'year') // false
moment('2010-10-20').isBefore('2011-01-01', 'year') // true

// 是否相等
moment('2010-10-20').isSame('2010-10-20') // true
moment('2010-10-20').isSame('2009-12-31', 'year')  // false
moment('2010-10-20').isSame('2010-01-01', 'year')  // true

// 晚于
moment('2010-10-20').isAfter('2010-10-19') // true
moment('2010-10-20').isAfter('2010-01-01', 'year') // false
moment('2010-10-20').isAfter('2009-12-31', 'year') // true

// 是否在时间范围内
moment('2010-10-20').isBetween('2010-10-19', '2010-10-25') // true
moment('2010-10-20').isBetween('2010-01-01', '2012-01-01', 'year') // false
moment('2010-10-20').isBetween('2009-12-31', '2012-01-01', 'year') // true

moment().isLeapYear() // 是否是闰年

日历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div class="calendar_div">
  <span @click="show_calendar()">{{ calendar_date }}</span>
  <van-icon @click="show_calendar()" class="icon-time" name="notes-o" style="font-size: 26px"/>
</div>
<van-calendar v-model="calendar_show" :min-date="new Date(2010,0,1)" @confirm="onCalendarConfirm"/>

<script>
  import moment from 'moment'

  export default {
    data () {
      return {
        calendar_date: '',
        calendar_show: false,
      }
    },
    mounted () {
      this.calendar_date = moment().format('YYYY-MM-DD')
    },
    methods: {
      show_calendar () {
        if (!this.calendar_show) {
          this.calendar_show = true
        }
      },
      onCalendarConfirm (date) {
        this.calendar_show = false
        this.calendar_date = moment(date).format('YYYY-MM-DD')
      }
    }
  }
</script>
<style lang='less' scoped>
  .calendar_div {
    display: flex;
    align-items: center;
    font-size: 16px;

    .van-icon {
      margin-left: 6px;
      color: @blue;
      font-size: 18px;
    }
  }
</style>

注意

默认日历组件的最小日期是当天，这就导致了我们不能选择之前的日期，所以我们可以设置最小日期，让之前的日期能够选择

但是一定要注意最小日期设置的越小，组件打开的就越慢，一定要根据实际情况设置。

van-calendar建议放在最外层的div内，放在别的地方如标题栏，在ios系统上会有问题。

顶部导航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<van-nav-bar
             title=""
             left-arrow
             :border="false"
             @click-left="onClickLeft"
             >
  <template #left>
    <van-icon name="arrow-left"/>
    <span style="padding-left: 6px">账户数量统计(按成员单位)</span>
  </template>
  <template #right>
    <div class="titleRight">
      <van-icon class="icon-time" name="notes-o" style="font-size: 26px" @click="calendar_show = true"/>
      <span @click="calendar_show = true">{{ calendar_date }}</span>
      <van-calendar v-model="calendar_show" :min-date="new Date(2000,1,1)" @confirm="onCalendarConfirm"/>
    </div>
  </template>
</van-nav-bar>

下拉刷新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<van-pull-refresh v-model="is_refresh" @refresh="onRefresh">
  <van-cell v-for="item in mlist" :key="item" :title="item"/>
</van-pull-refresh>

<script>
  export default {
    data () {
      return {
        is_refresh: false,
        mlist: [
          1, 2, 3, 4, 5, 6, 7, 8, 9, 10
        ]
      }
    },
    mounted () {

    },
    methods: {
      onRefresh () {
        this.is_refresh = true
        console.info('onRefresh')
        setTimeout(() => {
          this.is_refresh = false
        }, 2000)
      },

    }
  }
</script>

<style lang='less' scoped>
  .van-pull-refresh {
    flex: auto;
    overflow-y: auto;
  }
</style>

下拉刷新与加载更多

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<van-pull-refresh v-model="is_refresh" @refresh="onRefresh">
    <van-list
              v-model="is_loadmore"
              :finished="is_finished"
              finished-text="没有更多了"
              :immediate-check="true"
              @load="onLoadMore"
              >
        <van-cell v-for="item in mlist" :key="item" :title="item"/>
    </van-list>
</van-pull-refresh>

<script>
    export default {
        data () {
            return {
                is_refresh: false,
                is_loadmore: false,
                is_finished: false,
                currpage: -1,
                mlist: []
            }
        },
        mounted () {

        },
        methods: {
            async onRefresh () {
                this.currpage = 0
                this.is_finished = false
                this.is_refresh = true
                this.mlist = []
                await this.queryList()
                this.is_refresh = false
            },
            async onLoadMore () {
                this.is_refresh = false
                this.is_loadmore = true
                this.currpage += 1
                await this.queryList()
                // 加载状态结束
                this.is_loadmore = false
            },
            async queryList () {
                const res = await getData({
                    startindex: this.currpage * 10 + 1,
                    endindex: this.currpage * 10 + 10
                })
                const data = res.data
                if (data) {
                    this.mlist = this.mlist.concat(data.data)
                    if (data.data.length === 0) {
                        this.is_finished = true
                    }
                }
            }
        }
    }
</script>

<style lang='less' scoped>
    .van-pull-refresh {
        flex: auto;

        .van-list {
            min-height: 110%;
            overflow: hidden;
        }
    }
</style>

List

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

注意：

  1. 组件初始化时默认会自动调用onLoadMore方法，如果我们设置:immediate-check="false"则初始化时不再自动调用onLoadMore。
  2. 如果我们设置:immediate-check="false"，当数据的条数较少，显示的数据比List的高度要低的时候，并不会触发onLoadMore,因为没有出现滚动条，即使上拉也不会触发。
  3. :immediate-check="true"这是默认的值，不建议改为false,因为true的时候组件会根据渲染数据的高度，自动调用0到多次onLoadMore，不会因为数据太少而导致无法触发onLoadMore的问题。
  4. is_finished一定要在没有更多数据的时候再设置为true,否则不再触发onLoadMore，下拉刷新时一定要把is_finished再设置为false。
  5. 注意添加.van-list的样式，否则没有滚动条。

注意一定要设置van-list的高度,并且一定要超过100%，否则如果一页数据不足一屏就会出现加载更多失效。

1
2
3
4
.van-list {
    min-height: 110%;
    overflow: hidden;
}

折叠面板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<van-collapse v-model="activeNames">
  <van-collapse-item name="1">
    <template #title>
      <div>标题1 <van-icon name="question-o" /></div>
    </template>
    内容
  </van-collapse-item>
  <van-collapse-item title="标题2" name="2">内容</van-collapse-item>
  <van-collapse-item title="标题3" name="3">内容</van-collapse-item>
</van-collapse>
<script>
  export default {
    data() {
      return {
        activeNames: ['1'],
      };
    },
  };
</script>