picker 滑动选择--1

html

<div class="picker">
    <div class="scroll-container">
      <div class="target-center"></div>
      <div class="mask"></div>
      <div class="wrapper year-wrapper"> 
        <div class="scroll-wrapper"></div>
      </div>
    </div>
    <div class="scroll-container">
      <div class="target-center"></div>
      <div class="mask"></div>
      <div class="wrapper month-wrapper"> 
        <div class="scroll-wrapper"></div>
      </div>
    </div>
    <div class="scroll-container">
      <div class="target-center"></div>
      <div class="mask"></div>
      <div class="wrapper day-wrapper"> 
        <div class="scroll-wrapper"></div>
      </div>
    </div>
  </div>

css

.picker {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 250px;
  }

  .scroll-container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .scroll-container .wrapper {
    overflow-y: auto;
    height: 250px;
    scroll-snap-type: y mandatory;
  }

  .wrapper .item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    scroll-snap-align: center;
    color: #000;
  }

  .target-center {
    position: absolute;
    top: 100px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 50px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
  }

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
      180deg, 
      hsla(0, 0%, 100%, 1), 
      hsla(0, 0%, 100%,.8), 
      hsla(0, 0%, 100%, 0),
      hsla(0, 0%, 100%,.8), 
      hsla(0, 0%, 100%, 1));
    pointer-events: none;
  }

  ::-webkit-scrollbar { 
    display: none;
  }

js

const oYearWrapper  = qs('.year-wrapper');
const oMonthWrapper = qs('.month-wrapper');
const oDayWrapper   = qs('.day-wrapper');
const yearArr = [
    2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009,
    2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019,
    2020, 2021, 2022, 2023
  ];
const monthArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const currentDate = [2021, 2, 15];
let dayArr = getDayArr(...currentDate);
let callback;

const init = () => {
    initDom();
    bindEvent();
}

function initDom(){
    createItems(oYearWrapper, yearArr);
    createItems(oMonthWrapper, monthArr);
    createItems(oDayWrapper, dayArr);
    initCurrentDate(...currentDate);
}
function bindEvent(){
    oYearWrapper.addEventListener('scrollend', setCurrentDate.bind(oYearWrapper, 'YEAR'), false);
    oMonthWrapper.addEventListener('scrollend', setCurrentDate.bind(oMonthWrapper, 'MONTH'), false);
    oDayWrapper.addEventListener('scrollend', setCurrentDate.bind(oDayWrapper, 'DAY'), false);
}

function setCurrentDate (field) {
    const wrapper = this;
    const index = wrapper.scrollTop / 50;

    switch (field) {
      case 'YEAR':
        currentDate[0] = yearArr[index];
        dayArr = getDayArr(...currentDate);
        createItems(oDayWrapper, dayArr);
        break;
      case 'MONTH':
        currentDate[1] = monthArr[index];
        dayArr = getDayArr(...currentDate);
        createItems(oDayWrapper, dayArr);
        break;
      case 'DAY':
        currentDate[2] = dayArr[index];
        break;
      default:
        break;
    }
    callback(currentDate);
    //console.log(currentDate);
    
  }

function initCurrentDate(year, month, day){
    const yIndex = yearArr.indexOf(year);
    const mIndex = monthArr.indexOf(month);
    const dIndex = dayArr.indexOf(day);
   
    setScrollY(oYearWrapper, yIndex);
    setScrollY(oMonthWrapper, mIndex);
    setScrollY(oDayWrapper, dIndex);
}

function setScrollY(dom, index){
    dom.scrollTo(0, 50*index);
}




function createItems(wrapper, arr){
    const oFrag = document.createDocumentFragment();
    const oScrollWrapper = wrapper.querySelector('.scroll-wrapper');
    for (let i = 0; i < 2; i++) {
        const oItem = createPlaceholder();
        oFrag.appendChild(oItem);
    }

    arr.forEach(year => {
        const oItem = document.createElement('div');
        oItem.innerText = year;
        oItem.setAttribute('data-num', year);
        oItem.classList.add('item');
        oFrag.appendChild(oItem);
    })

    for (let i = 0; i < 2; i++) {
        const oItem = createPlaceholder();
        oFrag.appendChild(oItem);
    }
   
    oScrollWrapper.innerHTML = '';
    oScrollWrapper.appendChild(oFrag);

}
function createPlaceholder(){
    const oitem = document.createElement('div');
    oitem.classList.add('item');

    return oitem;
}
function getDayArr(year, month){
    const count = getDaycount(year, month);
    let arr = [];
    for(let i = 1; i <= count; i++){
        arr.push(i);
    }
    return arr;
}
function getDaycount(year, month){
    return new Date(year, month, 0).getDate();
}
function qs(dif){
    return document.querySelector(dif);
}


function getcurrentDate(f){
    callback = f
}

init();
export default{
    getcurrentDate
}