微信小程序最近三个月自定义选择器

刚接到产品需求，看了原型图，按照以往项目经验，对项目进行开发排期，开发进度一切都很和谐，直到开发到‘年月日至年月日’自定义选择器，碰到了拦路虎，根据微信开发文档api耗费了大量精力，完善年月日自定义选择器,每天加班到深夜，一言难尽，现从项目中单独分离出自定义年月日。日期2022年7月1日，自定义选择器展示最近三个月。

 

  <view class="container">

    <view class="page-body">

      <picker-view indicator-style="height: 50px;" style="width: 686rpx; height: 300px;margin: 0 auto;" value="{{value}}" bindchange="bindChange">

        <picker-view-column>

          <view wx:for="{{years}}" wx:key="{{years}}"  class="{{item==year?'selected-datecolor':''}}" style="--mainColor--: {{ mainColor }};line-height: 50px; text-align: center;">{{item}}</view>

        </picker-view-column>

        <picker-view-column>

          <view wx:for="{{months}}" wx:key="{{months}}"  class="{{item==month?'selected-datecolor':''}}"   style="--mainColor--: {{ mainColor }};line-height: 50px; text-align: center;">{{item}}</view>

        </picker-view-column>

        <picker-view-column>

          <view wx:for="{{days}}" wx:key="{{days}}"  class="{{item==day?'selected-datecolor':''}}" style="--mainColor--: {{ mainColor }};line-height: 50px; text-align: center;">{{item}}</view>

        </picker-view-column>

        <picker-view-column>

          <view  style="line-height: 50px; text-align: center;">至</view>

        </picker-view-column>        

        <picker-view-column>

          <view wx:for="{{yearsright}}" wx:key="{{yearsright}}"  class="{{item==yearright?'selected-datecolor':''}}" style="--mainColor--: {{ mainColor }};line-height: 50px; text-align: center;">{{item}}</view>

        </picker-view-column>

        <picker-view-column>

          <view wx:for="{{monthsright}}" wx:key="{{monthsright}}"  class="{{item==monthright?'selected-datecolor':''}}" style="--mainColor--: {{ mainColor }};line-height: 50px; text-align: center;">{{item}}</view>

        </picker-view-column>

        <picker-view-column>

          <view wx:for="{{daysright}}" wx:key="{{daysright}}"  class="{{item==dayright?'selected-datecolor':''}}" style="--mainColor--: {{ mainColor }};line-height: 50px; text-align: center;">{{item}}</view>

        </picker-view-column>        

      </picker-view>

    </view>

  </view>