Implementieren Sie den Datumsauswahleffekt im WeChat-Applet

Mit der weit verbreiteten Anwendung von WeChat-Miniprogrammen müssen immer mehr Entwickler Datumsauswahleffekte implementieren, um die Benutzererfahrung zu verbessern. In diesem Artikel wird erläutert, wie der Datumsauswahleffekt im WeChat-Applet implementiert wird, und es werden spezifische Codebeispiele aufgeführt.

1. Implementierungsidee

Die Grundidee zum Erreichen des Datumsauswahleffekts besteht darin, zunächst eine Datumsauswahlkomponente in WXML zu erstellen, Datumsdaten dynamisch über JavaScript zu generieren und dann die vom Benutzer ausgewählten Datumsinformationen durch Abhören der Änderung abzurufen Ereignis der Komponente .

2. Implementierungsprozess

1. Erstellen Sie eine Datumsauswahlkomponente in WXML

Wir können die vom WeChat-Applet bereitgestellte Auswahlansichtskomponente verwenden, um den Datumsauswahleffekt zu erzielen. Die Picker-View-Komponente kann listenähnlichen Inhalt in einen scrollenden Picker rendern.

In WXML können wir so schreiben:

<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>

Der obige Code erstellt eine Picker-View-Komponente und bindet das Ereignis onDateChange und die Variable dateIndex. Darunter werden die Variablen „Jahre“, „Monate“ und „Tage“ zum Speichern der generierten Jahres-, Monats- und Tagesdaten verwendet.

2. JavaScript generiert dynamisch Datumsdaten

Um Datumsdaten zu generieren, müssen wir das aktuelle Jahr, den aktuellen Monat und den aktuellen Tag abrufen und dann einen relativ einfachen Algorithmus verwenden, um Arrays aus Jahr, Monat und Tag zu generieren.

In JavaScript können wir so schreiben:

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
    });
  }
});

Der obige Code ruft zuerst das aktuelle Jahr, den aktuellen Monat und den aktuellen Tag ab, berechnet dann die Anzahl der Tage im aktuellen Monat basierend auf Jahr und Monat und speichert das Jahr und den Monat und Tag in Jahre, Monate und Tage.

In der onLoad-Funktion rufen wir die Funktion getDaysOfMonth auf, um die Anzahl der Tage im aktuellen Monat abzurufen und die erhaltenen Jahres-, Monats- und Tagesdaten in der Datenvariablen zu speichern. Wir können auch die anfängliche dateIndex-Variable in der onLoad-Funktion auf 0 setzen.

In der Funktion onDateChange verwenden wir die Funktion setData, um die Variable dateIndex zu aktualisieren und die vom Benutzer ausgewählten Datumsinformationen aufzuzeichnen.

3. Codebeispiel

Der vollständige WeChat-Applet-Code lautet wie folgt:

<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. Zusammenfassung: In diesem Artikel wird beschrieben, wie der Datumsauswahleffekt im WeChat-Applet implementiert wird, einschließlich der Einrichtung von Datumsauswahlkomponenten und der dynamischen Generierung von Datumsdaten und hören Sie sich das Änderungsereignis der Komponente an, um die vom Benutzer ausgewählten Datumsinformationen zu erhalten. Anhand der Beispiele in diesem Artikel können Leser den grundlegenden Entwicklungsprozess des WeChat-Applets verstehen und die Methode zur Verwendung der Picker-View-Komponente beherrschen. Leser können basierend auf dem Beispielcode in diesem Artikel ihre eigenen Datumsauswahleffekte implementieren.

Das obige ist der detaillierte Inhalt vonImplementieren Sie den Datumsauswahleffekt im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!