WeChat アプレットに日付ピッカー効果を実装する

WeChat ミニ プログラムの普及に伴い、ユーザー エクスペリエンスを向上させるために日付ピッカー効果を実装する必要がある開発者が増えています。この記事では、WeChat アプレットに日付ピッカー効果を実装する方法と具体的なコード例を紹介します。

1. 実装のアイデア

日付ピッカーの効果を達成するための基本的なアイデアは、まず WXML で日付ピッカー コンポーネントを作成し、JavaScript を介して日付データを動的に生成し、次にその変更をリッスンすることです。コンポーネントイベントを使用して、ユーザーが選択した日付情報を取得します。

2. 実装プロセス

1. WXML で日付ピッカー コンポーネントを作成する

WeChat アプレットによって提供されるピッカー ビュー コンポーネントを使用して実装できます。日付ピッカー効果。 picker-view コンポーネントは、リストのようなコンテンツをスクロール ピッカーにレンダリングできます。

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

上記のコードは、まず現在の年、月、日を取得し、次に年に基づいて現在の月の日数を計算します。 month、年、月、日を追加します。日はそれぞれ、年、月、日の配列に格納されます。

onLoad 関数では、getDaysOfMonth 関数を呼び出して当月の日数を取得し、取得した年、月、日のデータをデータ変数に保存します。 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 アプレットの基本的な開発プロセスを理解し、ピッカー ビュー コンポーネントの使用方法を習得できます。読者は、この記事のサンプル コードに基づいて独自の日付ピッカー効果を実装できます。

以上がWeChat アプレットに日付ピッカー効果を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。