vant-weapp选择年份

程序猿向前跑

已于 2023-02-10 10:30:35 修改

阅读量625

点赞数 1

分类专栏：移动端文章标签： javascript 前端开发语言

于 2023-02-10 10:30:04 首次发布

本文链接：https://blog.csdn.net/qq_46199553/article/details/128965522

版权

移动端专栏收录该内容

44 篇文章 1 订阅

订阅专栏

vant-weapp没有年份的组件,所以需要自己组装

在这里插入图片描述

<!-- 选择年份弹出框 -->
<van-popup show="{{ showYear }}" position="bottom" custom-style="height: 40%;" bind:close="onClose">
    <van-picker columns="{{ columns }}" default-index="{{ currentIndex }}" bind:change="onChange" show-toolbar title="选择年份" bind:cancel="onCancel" bind:confirm="onConfirm" />
</van-popup>

{
    "navigationBarTitleText": "历史账单",
    "navigationBarTextStyle": "black",
    "usingComponents": {
        "van-popup": "@vant/weapp/popup/index",
        "van-datetime-picker": "@vant/weapp/datetime-picker/index",
        "van-picker": "@vant/weapp/picker/index"
    }
}

// pages/common/customer-manage/history-bill/index.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        showYear: false,
        // 选择时间的年份
        columns: [],

        currentDate: new Date().getTime(),

        // 默认当前年份
        currentIndex: new Date().getFullYear() - (new Date().getFullYear() - 25),

        currentName: new Date().getFullYear() + "年"
    },

    /**
     * 生命周期函数--监听页面加载
     */
    async onLoad(options) {
        let that = this;
        // 调用年份的操作
        that.makeYear()
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    },
    //--------自定义方法----------
    // 选择年份的区域，弹出弹窗框
    chooseYear() {
        this.setData({
            showYear: true
        })
    },

    // 弹出框确认事件
    onConfirm(e) {
        console.log(e, 1111)
        this.setData({
            showYear: false,
            currentName: e.detail.value + "年",
            "historyBillParam.year": e.detail.value
        })
        this.quotaHistoryBill(this.data.historyBillParam);
    },
    // 取消选择年份的弹框
    onCancel() {
        let that = this;
        that.setData({
            showYear: false
        })
    },
    // 对选择时间进行单独的处理
    makeYear() {
        let year = []
        let currentDate = new Date()
        console.log(currentDate.getFullYear())
        for (let j = currentDate.getFullYear() - 25; j < currentDate.getFullYear(); j++) {
            year.push(j)
        }
        for (let i = currentDate.getFullYear(); i <= currentDate.getFullYear() + 25; i++) {
            year.push(i)
        }
        this.setData({
            columns: year,
        })
    },
})