Implémenter l'effet de sélecteur de date dans l'applet WeChat

Avec l'application généralisée des mini-programmes WeChat, de plus en plus de développeurs doivent implémenter des effets de sélecteur de date pour améliorer l'expérience utilisateur. Cet article présentera comment implémenter l'effet de sélecteur de date dans l'applet WeChat et donnera des exemples de code spécifiques.

1. Idée de mise en œuvre

L'idée de base pour obtenir l'effet de sélecteur de date est la suivante : créez d'abord un composant de sélecteur de date en WXML, générez dynamiquement des données de date via JavaScript, puis obtenez les informations de date sélectionnées par l'utilisateur en écoutant le changement. événement du composant .

2. Processus de mise en œuvre

1. Créez un composant de sélecteur de date dans WXML

Nous pouvons utiliser le composant picker-view fourni par l'applet WeChat pour obtenir l'effet de sélecteur de date. Le composant picker-view peut restituer un contenu de type liste dans un sélecteur à défilement.

En WXML, nous pouvons écrire comme ceci :

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

Le code ci-dessus crée un composant picker-view et lie l'événement onDateChange et la variable dateIndex. Parmi elles, les variables années, mois et jours sont utilisées pour stocker les données générées sur l'année, le mois et le jour.

2. JavaScript génère dynamiquement des données de date

Afin de générer des données de date, nous devons obtenir l'année, le mois et le jour en cours, puis utiliser un algorithme relativement simple pour générer des tableaux d'année, de mois et de jour respectivement.

En JavaScript, nous pouvons écrire comme ceci :

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

Le code ci-dessus obtient d'abord l'année, le mois et le jour en cours, puis calcule le nombre de jours du mois en cours en fonction de l'année et du mois, et stocke l'année et le mois. et jour en années, mois et jours, respectivement.

Dans la fonction onLoad, nous appelons la fonction getDaysOfMonth pour obtenir le nombre de jours du mois en cours et enregistrons les données obtenues de l'année, du mois et du jour dans la variable de données. Nous pouvons également définir la variable dateIndex initiale sur 0 dans la fonction onLoad.

Dans la fonction onDateChange, nous utilisons la fonction setData pour mettre à jour la variable dateIndex et enregistrer les informations de date sélectionnées par l'utilisateur.

3. Exemple de code

Le code complet de l'applet WeChat est le suivant :

<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. Résumé

Cet article présente comment implémenter l'effet de sélecteur de date dans l'applet WeChat, y compris l'établissement de composants de sélecteur de date et la génération dynamique de données de date. et écouter l'événement de changement du composant pour obtenir les informations de date sélectionnées par l'utilisateur. Grâce aux exemples de cet article, les lecteurs peuvent comprendre le processus de développement de base de l'applet WeChat et maîtriser la méthode d'utilisation du composant picker-view. Les lecteurs peuvent implémenter leurs propres effets de sélecteur de date en fonction de l'exemple de code présenté dans cet article.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!