WeChat 애플릿에서 날짜 선택기 효과 구현

WeChat 미니 프로그램이 널리 적용됨에 따라 점점 더 많은 개발자가 사용자 경험을 개선하기 위해 날짜 선택기 효과를 구현해야 합니다. 이 기사에서는 WeChat 애플릿에서 날짜 선택기 효과를 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 구현 아이디어

날짜 선택기 효과를 구현하는 기본 아이디어는 먼저 WXML에서 날짜 선택기 구성 요소를 만들고 JavaScript를 통해 날짜 데이터를 동적으로 생성한 다음 변경 내용을 듣고 사용자가 선택한 날짜 정보를 얻는 것입니다. 구성 요소의 이벤트입니다.

2. 구현 프로세스

1. WXML에서 날짜 선택기 구성 요소 만들기

WeChat 애플릿에서 제공하는 선택기 보기 구성 요소를 사용하여 날짜 선택기 효과를 얻을 수 있습니다. 선택기 보기 구성 요소는 목록과 유사한 콘텐츠를 스크롤 선택기로 렌더링할 수 있습니다.

WXML에서는 다음과 같이 작성할 수 있습니다.

<picker-view bindchange="onDateChange" value="{{dateIndex}}" style="width: 100%; height: 200rpx;">
  <picker-view-column>
    <view wx:for="{{years}}" wx:key="year">{{item}}年</view>
  </picker-view-column>
  <picker-view-column>
    <view wx:for="{{months}}" wx:key="month">{{item}}月</view>
  </picker-view-column>
  <picker-view-column>
    <view wx:for="{{days}}" wx:key="day">{{item}}日</view>
  </picker-view-column>
</picker-view>

위 코드는 선택기 뷰 구성 요소를 생성하고 onDateChange 이벤트와 dateIndex 변수를 바인딩합니다. 그 중 년, 월, 일 변수는 생성된 연, 월, 일 데이터를 저장하는 데 사용됩니다.

2. JavaScript는 날짜 데이터를 동적으로 생성합니다

날짜 데이터를 생성하려면 현재 연도, 월, 일을 가져온 다음 비교적 간단한 알고리즘을 사용하여 각각 연, 월, 일 배열을 생성해야 합니다.

JavaScript에서는 다음과 같이 작성할 수 있습니다.

Page({
  data: {
    years: [],
    months: [],
    days: [],
    dateIndex: 0
  },
  onLoad: function () {
    // 获取当前年月日
    var datetime = new Date();
    var year = datetime.getFullYear();
    var month = datetime.getMonth() + 1;
    var day = datetime.getDate();

    // 设置年份数组，从当前年往前推 100 年
    var years = [];
    for (var i = year; i >= year - 100; i--) {
      years.push(i);
    }

    // 设置月份数组
    var months = [];
    for (var i = 1; i <= 12; i++) {
      months.push(i);
    }

    // 设置日期数组，根据年月计算出当月的天数
    var days = [];
    var dayCount = this.getDaysOfMonth(year, month);
    for (var i = 1; i <= dayCount; i++) {
      days.push(i);
    }

    // 更新数据
    this.setData({
      years: years,
      months: months,
      days: days
    });
  },
  // 根据年月获取当月的天数
  getDaysOfMonth: function (year, month) {
    var dayCount = 31;
    switch (month) {
      case 2:
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
          dayCount = 29;
        } else {
          dayCount = 28;
        }
        break;
      case 4:
      case 6:
      case 9:
      case 11:
        dayCount = 30;
        break;
    }
    return dayCount;
  },
  // 监听日期选择器的 change 事件，更新 dateIndex 变量
  onDateChange: function (e) {
    this.setData({
      dateIndex: e.detail.value
    });
  }
});

위 코드는 먼저 현재 연도, 월, 일을 가져온 다음 연도와 월을 기준으로 이번 달의 일 수를 계산하고 연도, 월을 저장합니다. 일을 각각 연도, 월, 일로 배열합니다.

onLoad 함수에서는 getDaysOfMonth 함수를 호출하여 이번 달의 일수를 가져오고, 가져온 연, 월, 일 데이터를 data 변수에 저장합니다. onLoad 함수에서 초기 dateIndex 변수를 0으로 설정할 수도 있습니다.

onDateChange 함수에서는 setData 함수를 사용하여 dateIndex 변수를 업데이트하고 사용자가 선택한 날짜 정보를 기록합니다.

3. 코드 예

전체 WeChat 애플릿 코드는 다음과 같습니다.

<page>
  <view class="page__body">
    <picker-view bindchange="onDateChange" value="{{dateIndex}}" style="width: 100%; height: 200rpx;">
      <picker-view-column>
        <view wx:for="{{years}}" wx:key="year">{{item}}年</view>
      </picker-view-column>
      <picker-view-column>
        <view wx:for="{{months}}" wx:key="month">{{item}}月</view>
      </picker-view-column>
      <picker-view-column>
        <view wx:for="{{days}}" wx:key="day">{{item}}日</view>
      </picker-view-column>
    </picker-view>
  </view>
</page>

Page({
  data: {
    years: [],
    months: [],
    days: [],
    dateIndex: 0
  },
  onLoad: function () {
    // 获取当前年月日
    var datetime = new Date();
    var year = datetime.getFullYear();
    var month = datetime.getMonth() + 1;
    var day = datetime.getDate();

    // 设置年份数组，从当前年往前推 100 年
    var years = [];
    for (var i = year; i >= year - 100; i--) {
      years.push(i);
    }

    // 设置月份数组
    var months = [];
    for (var i = 1; i <= 12; i++) {
      months.push(i);
    }

    // 设置日期数组，根据年月计算出当月的天数
    var days = [];
    var dayCount = this.getDaysOfMonth(year, month);
    for (var i = 1; i <= dayCount; i++) {
      days.push(i);
    }

    // 更新数据
    this.setData({
      years: years,
      months: months,
      days: days
    });
  },
  // 根据年月获取当月的天数
  getDaysOfMonth: function (year, month) {
    var dayCount = 31;
    switch (month) {
      case 2:
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
          dayCount = 29;
        } else {
          dayCount = 28;
        }
        break;
      case 4:
      case 6:
      case 9:
      case 11:
        dayCount = 30;
        break;
    }
    return dayCount;
  },
  // 监听日期选择器的 change 事件，更新 dateIndex 变量
  onDateChange: function (e) {
    this.setData({
      dateIndex: e.detail.value
    });
  }
});

4. 요약

이 문서에서는 날짜 선택기 구성 요소 및 날짜 데이터 동적 생성을 포함하여 WeChat 애플릿에서 날짜 선택기 효과를 구현하는 방법을 소개합니다. 사용자가 선택한 날짜 정보를 얻기 위해 컴포넌트의 변경 이벤트를 수신합니다. 이 기사의 예제를 통해 독자는 WeChat 애플릿의 기본 개발 프로세스를 이해하고 Picker-View 구성 요소를 사용하는 방법을 익힐 수 있습니다. 독자는 이 문서의 샘플 코드를 기반으로 자신만의 날짜 선택기 효과를 구현할 수 있습니다.

위 내용은 WeChat 애플릿에서 날짜 선택기 효과 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!