移动端季度筛选框的实现

移动端我们利用 vant 组件即可以满足需求

前言

上一篇文章我们讲到了PC端实现季度筛选框，那么本文我们来聊一聊移动端实现季度筛选，相较于PC端，移动端相对简单很多，利用 vant 组件即可。

---

一、实现效果

二、实现步骤

1.使用vant级联组件

<van-popup v-model="showEndPicker" round position="bottom">
      <van-cascader
        v-model="currentDate2"
        title="请选择"
        :options="options"
        @close="showEndPicker = false"
        @finish="onFinish2"
      />
</van-popup>

2.自定义年份选项

options: [
        {
          text: '2018年',
          value: '2018'
        },
        {
          text: '2019年',
          value: '2019'
        },
        {
          text: '2020年',
          value: '2020'
        },
        {
          text: '2021年',
          value: '2021'
        },
        {
          text: '2022年',
          value: '2022'
        },
        {
          text: '2023年',
          value: '2023'
        }
],

这里插入一个获取年份的方法

// 获取前后5年的年份
this.yearList = [];
let date = new Date();
let startYear = date.getFullYear()-5;//起始年份
let endYear = date.getFullYear() + 5;//结束年份
for (var i=startYear;i<=endYear;i++) {
    let obj = i;
    this.yearList.push(obj);
}

3.自定义季度选项

// 打开弹框时
openPicker() {
        this.options.forEach(v => {
          v.children = [
            { text: '第一季度', value: '1' },
            { text: '第二季度', value: '2' },
            { text: '第三季度', value: '3' },
            { text: '第四季度', value: '4' }
          ];
        });
 },

---

总结

以上就是今天要讲的内容，利用vant组件实现季度筛选框，希望对你有所帮助。