面试问到的,让实现一个时间选择器

自己尝试做了一下

<view uni-common-pl">时间选择器</view>
<view>
      <view>
        <view>
          <picker @change="bindPickerChange" :range="array" mode=multiSelector>
            <view>{
   { array[0][year] }} - {
   { array[1][month] }} - {
   { array[2][date] }} - {
   { array[3][hour] }} - {
   { array[4][minite] }}</view>
          </picker>
        </view>
      </view>
    </view>

 js部分

  export default {
    data() {
      return {
        array: [
          ['年份',2019,2020,2021,2022,2023,2024,2025,2026],
          ['月份',1,2,3,4,5,6,7,8,9,10,11,12],
          ['日期',1,2,3,4,5,6],
          ['小时',1,2,3,4,5,6,7,8],
          ['分钟',0,10,20,30,40,50]
        ],
        year: 0,
        month: 0,
        date: 0,
        hour: 0,
        minite: 0
      }
    },
    methods: {
      // 处理时间选择器
      bindPickerChange(e) {
        console.log(e.detail.value);
        this.year = e.detail.value[0]
        this.month = e.detail.value[1]
        this.date = e.detail.value[2]
        this.hour = e.detail.value[3]
        this.minite = e.detail.value[4]
      }
    }
  }

实现效果

 

原文链接:https://blog.csdn.net/qq_52845451/article/details/126908742

最后修改:2023 年 10 月 30 日
如果觉得我的文章对你有用,请随意赞赏