刚接到产品需求,看了原型图,按照以往项目经验,对项目进行开发排期,开发进度一切都很和谐,直到开发到‘年月日至年月日’自定义选择器,碰到了拦路虎,根据微信开发文档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>