vue移动端生日日期选择

可以使用第三方库better-scroll和moment.js来实现移动端的日期选择器。具体实现步骤如下：

1. 安装better-scroll和moment.js

npm install better-scroll moment --save

2. 在组件中引入better-scroll和moment.js

import BScroll from 'better-scroll'
import moment from 'moment'

3. 在模板中添加日期选择器的HTML结构

<div class="date-picker">
  <div class="date-picker-content">
    <div class="date-picker-item" v-for="(item, index) in dateList" :key="index">{{ item }}</div>
  </div>
</div>

4. 在组件中定义日期选择器的数据和方法

data() {
  return {
    dateList: [], // 日期列表
    selectedIndex: 0, // 当前选中的日期索引
    scroll: null // better-scroll实例
  }
},
methods: {
  initDateList() {
    const now = moment() // 获取当前时间
    const dateList = []
    for (let i = 0; i < 365; i++) { // 获取未来一年的日期列表
      const date = now.add(1, 'days').format('YYYY-MM-DD')
      dateList.push(date)
    }
    this.dateList = dateList
  },
  initScroll() {
    this.scroll = new BScroll('.date-picker', {
      wheel: {
        selectedIndex: this.selectedIndex, // 设置初始选中项
        wheelWrapperClass: 'date-picker-content',
        wheelItemClass: 'date-picker-item'
      },
      probeType: 3 // 监听滚动事件
    })
    this.scroll.on('scrollEnd', () => {
      this.selectedIndex = this.scroll.getSelectedIndex()
    })
  }
},
mounted() {
  this.initDateList()
  this.initScroll()
}

5. 样式设置

.date-picker {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 200px;
  background-color: #fff;
  z-index: 999;
}

.date-picker-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.date-picker-item {
  font-size: 16px;
  text-align: center;
  line-height: 40px;
}