fix: 兼容支付宝小程序。修改滚动判断逻辑。修复h5 demo问题。修复滚动动画props失效问题 (#1547)

Co-authored-by: lkjh3214 <13121007159@163.com>

src/packages/__VUE/calendar/demo.vue

@@ -32,7 +32,7 @@
         ref="calendarRef"
         v-model:visible="isVisible1"
         :default-value="date1"
-        type="multiple"
+        type="range"
         :start-date="`2019-12-22`"
         :end-date="`2021-01-08`"
         @close="closeSwitch('isVisible1')"

src/packages/__VUE/calendar/index.taro.vue

@@ -28,6 +28,7 @@
       :end-text="endText"
       :show-today="showToday"
       :show-title="showTitle"
+      :to-date-animation="toDateAnimation"
       :show-sub-title="showSubTitle"
     >
       <template v-slot:btn v-if="showTopBtn">
@@ -62,6 +63,7 @@
     @select="select"
     :show-title="showTitle"
     :show-sub-title="showSubTitle"
+    :to-date-animation="toDateAnimation"
     :show-today="showToday"
   >
     <template v-slot:btn v-if="showTopBtn">
@@ -84,6 +86,8 @@ import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('calendar');
 import CalendarItem from '../calendaritem/index.taro.vue';
 import Utils from '@/packages/utils/date';
+import { useExpose } from '@/packages/utils/useExpose/index';
+
 export default create({
   components: {
     [CalendarItem.name]: CalendarItem
@@ -97,6 +101,10 @@ export default create({
       type: Boolean,
       default: false
     },
+    toDateAnimation: {
+      type: Boolean,
+      default: true
+    },
     poppable: {
       type: Boolean,
       default: true
@@ -162,7 +170,12 @@ export default create({
     let show = ref(props.visible);
     // element refs
     const calendarRef = ref<null | HTMLElement>(null);
-
+    const scrollToDate = (date: string) => {
+      calendarRef.value?.scrollToDate(date);
+    };
+    useExpose({
+      scrollToDate
+    });
     // methods
     const update = () => {
       show.value = false;

src/packages/__VUE/calendar/index.vue

@@ -31,6 +31,7 @@
       :show-today="showToday"
       :show-title="showTitle"
       :show-sub-title="showSubTitle"
+      :to-date-animation="toDateAnimation"
     >
       <template v-slot:btn v-if="showTopBtn">
         <slot name="btn"> </slot>
@@ -65,6 +66,7 @@
     :show-today="showToday"
     :show-title="showTitle"
     :show-sub-title="showSubTitle"
+    :to-date-animation="toDateAnimation"
     ref="calendarRef"
   >
     <template v-slot:btn v-if="showTopBtn">
@@ -103,6 +105,10 @@ export default create({
       type: Boolean,
       default: false
     },
+    toDateAnimation: {
+      type: Boolean,
+      default: true
+    },
     poppable: {
       type: Boolean,
       default: true

src/packages/__VUE/calendaritem/index.taro.vue

@@ -23,9 +23,10 @@
       :scroll-y="true"
       class="nut-calendar-content"
       @scroll="mothsViewScroll"
+      :scroll-with-animation="scrollWithAnimation"
       ref="months"
     >
-      <view class="calendar-months-panel" style="{{heihgt:containerHeight}}">
+      <view class="calendar-months-panel" :style="{ height: containerHeight }">
         <view class="viewArea" :style="{ transform: `translateY(${translateY}px)` }">
           <view class="calendar-month" v-for="(month, index) of compConthsDatas" :key="index">
             <view class="calendar-month-title">{{ month.title }}</view>
@@ -48,7 +49,7 @@
                     <view class="calendar-curr-tip-curr" v-if="!bottomInfo && showToday && isCurrDay(day)">
                       {{ translate('today') }}
                     </view>
-                    <view :class="{ 'calendar-curr-tips-top': rangeTip(day, month), 'calendar-day-tip': true }">
+                    <view :class="{ 'calendar-curr-tips-top': rangeTip(), 'calendar-day-tip': true }">
                       {{ isStartTip(day, month) ? startText || translate('start') : '' }}
                     </view>
                     <view class="calendar-day-tip" v-if="isEndTip(day, month)">{{ endText || translate('end') }}</view>
@@ -67,14 +68,15 @@
   </view>
 </template>
 <script lang="ts">
-import { PropType, reactive, ref, watch, toRefs, computed, onMounted, nextTick } from 'vue';
+import { reactive, ref, watch, toRefs, computed, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create, translate } = createComponent('calendar-item');
 import Taro from '@tarojs/taro';
 import Utils from '@/packages/utils/date';
 import { useExpose } from '@/packages/utils/useExpose/index';
 import requestAniFrame from '@/packages/utils/raf';
-let TARO_ENV = process.env.TARO_ENV;
+
+const TARO_ENV = Taro.getEnv();
 
 type InputDate = string | string[];
 interface CalendarState {
@@ -112,8 +114,8 @@ interface MonthInfo {
   curData: string[] | string;
   title: string;
   monthData: Day[];
-  cssHeight?: Number;
-  cssScrollHeight?: Number;
+  cssHeight?: number;
+  cssScrollHeight?: number;
 }
 
 export default create({
@@ -182,6 +184,7 @@ export default create({
     // element refs
     const scalePx = ref(2);
     const viewHeight = ref(0);
+    const scrollWithAnimation = ref(false);
     const months = ref<null | HTMLElement>(null);
     const showTopBtn = computed(() => {
       return slots.btn;
@@ -197,7 +200,7 @@ export default create({
       yearMonthTitle: '',
       defaultRange: [0, 1],
       compConthsDatas: [],
-      containerHeight: '',
+      containerHeight: '100%',
       currDate: '',
       propStartDate: '',
       propEndDate: '',
@@ -296,7 +299,7 @@ export default create({
     };
 
     // 选中数据
-    const chooseDay = (day: Day, month: MonthInfo, isFirst: boolean, isRange?: boolean) => {
+    const chooseDay = (day: Day, month: MonthInfo, isFirst: boolean) => {
       if (getClass(day, month) != `${state.dayPrefix}-disabled`) {
         const { type } = props;
         let days = [...month.curData];
@@ -441,7 +444,7 @@ export default create({
         ]
       };
       let titleHeight, itemHeight;
-      if (TARO_ENV === 'h5') {
+      if (TARO_ENV === Taro.ENV_TYPE.WEB) {
         titleHeight = 46 * scalePx.value + 16 * scalePx.value * 2;
         itemHeight = 128 * scalePx.value;
       } else {
@@ -539,14 +542,14 @@ export default create({
         if (state.currDate.length > 0) {
           let defaultArr: string[] = [];
           let obj: any = {};
-          state.currDate.forEach((item: string, index: number) => {
+          state.currDate.forEach((item: string) => {
             if (
               propStartDate &&
               !Utils.compareDate(item, propStartDate) &&
               propEndDate &&
               !Utils.compareDate(propEndDate, item)
             ) {
-              if (!obj.hasOwnProperty(item)) {
+              if (!Object.hasOwnProperty.call(obj, item)) {
                 defaultArr.push(item);
                 obj[item] = item;
               }
@@ -625,31 +628,56 @@ export default create({
       let dateArr = splitDate(date);
       state.monthsData.forEach((item, index) => {
         if (item.title == translate('monthTitle', dateArr[0], dateArr[1])) {
-          if (props.toDateAnimation) {
-            Taro.createSelectorQuery()
-              .select('.nut-calendar-content')
-              .scrollOffset((res) => {
-                let scrollTop = res.scrollTop;
-                let distance = state.monthsData[index].cssScrollHeight - scrollTop;
-                let flag = 0;
-                let interval = setInterval(() => {
-                  flag++;
-                  if (months.value) {
-                    let offset = distance / 10;
-                    state.scrollTop = state.scrollTop + offset;
-                  }
-                  if (flag >= 10) {
-                    clearInterval(interval);
-                    if (months.value) {
-                      state.scrollTop = state.monthsData[index].cssScrollHeight;
-                    }
-                  }
-                }, 40);
-              })
-              .exec();
-          } else {
-            state.scrollTop = state.monthsData[index].cssScrollHeight;
-          }
+          // scrollTop 不会实时变更。当再次赋值时，scrollTop无变化时，不会触发滚动
+          state.scrollTop += 1;
+          scrollWithAnimation.value = props.toDateAnimation;
+          requestAniFrame(() => {
+            setTimeout(() => {
+              state.scrollTop = state.monthsData[index].cssScrollHeight;
+              setTimeout(() => {
+                scrollWithAnimation.value = false;
+              }, 200);
+            }, 10);
+          });
+          // if (Taro.getEnv() == 'ALIPAY') {
+          //   state.scrollTop = state.monthsData[index].cssScrollHeight;
+          // } else {
+          //   if (selectorQuery) {
+          //     selectorQuery
+          //       .select('.nut-calendar-content')
+          //       .scrollOffset((res) => {
+          //         console.log(res);
+          //         if (props.toDateAnimation) {
+          //           let scrollTop = res.scrollTop;
+          //           let distance = state.monthsData[index].cssScrollHeight - scrollTop;
+          //           // state.scrollTop = res.scrollTop;
+          //           let flag = 0;
+          //           let interval = setInterval(() => {
+          //             flag++;
+          //             if (months.value) {
+          //               let offset = distance / 10;
+          //               state.scrollTop = state.scrollTop + offset;
+          //             }
+          //             if (flag >= 10) {
+          //               clearInterval(interval);
+          //               if (months.value) {
+          //                 state.scrollTop = state.monthsData[index].cssScrollHeight;
+          //               }
+          //             }
+          //           }, 40);
+          //         } else {
+          //           state.scrollTop = res.scrollTop;
+          //           setDefaultRange(state.monthsNum, index);
+          //           requestAniFrame(() => {
+          //             state.scrollTop = state.monthsData[index].cssScrollHeight;
+          //           });
+          //         }
+          //       })
+          //       .exec();
+          //   } else {
+          //     state.scrollTop = state.monthsData[index].cssScrollHeight;
+          //   }
+          // }
         }
       });
     };
@@ -695,7 +723,7 @@ export default create({
       return false;
     };
     // 开始结束时间是否相等
-    const rangeTip = (day: Day, month: MonthInfo) => {
+    const rangeTip = () => {
       if (state.currDate.length >= 2) {
         return Utils.isEqual(state.currDate[0], state.currDate[1]);
       }
@@ -723,32 +751,39 @@ export default create({
         if (currentScrollTop < state.monthsData[current].cssScrollHeight) {
           current -= 1;
         }
-      } else {
-        if (!viewHeight.value || viewHeight.value < 0) {
-          Taro.createSelectorQuery()
-            .select('.nut-calendar-content')
-            .boundingClientRect((res) => {
-              viewHeight.value = res.height;
-            })
-            .exec();
-        }
-        const viewPosition = Math.round(currentScrollTop + viewHeight.value);
-        if (
-          viewPosition < state.monthsData[current].cssScrollHeight + state.monthsData[current].cssHeight &&
-          currentScrollTop < state.monthsData[current].cssScrollHeight
-        ) {
-          current -= 1;
-        }
-        if (
-          current + 1 <= state.monthsNum &&
-          viewPosition >= state.monthsData[current + 1].cssScrollHeight + state.monthsData[current + 1].cssHeight
-        ) {
-          current += 1;
-        }
-        if (current >= 1 && currentScrollTop < state.monthsData[current - 1].cssScrollHeight) {
-          current -= 1;
-        }
       }
+      // else {
+      //   if (!viewHeight.value || viewHeight.value < 0) {
+      //     if (TARO_ENV === Taro.ENV_TYPE.ALIPAY) {
+      //       if (months.value) {
+      //         viewHeight.value = months.value.clientHeight;
+      //       }
+      //     } else {
+      //       Taro.createSelectorQuery()
+      //         .select('.nut-calendar-content')
+      //         .boundingClientRect((res) => {
+      //           viewHeight.value = res.height;
+      //         })
+      //         .exec();
+      //     }
+      //   }
+      //   const viewPosition = Math.round(currentScrollTop + viewHeight.value);
+      //   if (
+      //     viewPosition < state.monthsData[current].cssScrollHeight + state.monthsData[current].cssHeight &&
+      //     currentScrollTop < state.monthsData[current].cssScrollHeight
+      //   ) {
+      //     current -= 1;
+      //   }
+      //   if (
+      //     current + 1 <= state.monthsNum &&
+      //     viewPosition >= state.monthsData[current + 1].cssScrollHeight + state.monthsData[current + 1].cssHeight
+      //   ) {
+      //     current += 1;
+      //   }
+      //   if (current >= 1 && currentScrollTop < state.monthsData[current - 1].cssScrollHeight) {
+      //     current -= 1;
+      //   }
+      // }
 
       if (state.currentIndex !== current) {
         state.currentIndex = current;
@@ -770,7 +805,7 @@ export default create({
           let scale = 2;
           let screenWidth = res.screenWidth;
           let toFixed = 3;
-          if (TARO_ENV === 'h5') {
+          if (TARO_ENV === Taro.ENV_TYPE.WEB) {
             toFixed = 5;
           }
           scale = Number((screenWidth / 750).toFixed(toFixed));
@@ -808,6 +843,7 @@ export default create({
       months,
       ...toRefs(state),
       ...toRefs(props),
+      scrollWithAnimation,
       translate
     };
   }

src/packages/__VUE/calendaritem/index.vue

@@ -44,7 +44,7 @@
                     >
                     <view
                       class="calendar-day-tip"
-                      :class="{ 'calendar-curr-tips-top': rangeTip(day, month) }"
+                      :class="{ 'calendar-curr-tips-top': rangeTip() }"
                       v-if="isStartTip(day, month)"
                     >
                       {{ startText || translate('start') }}
@@ -65,7 +65,7 @@
   </view>
 </template>
 <script lang="ts">
-import { PropType, reactive, ref, watch, toRefs, computed } from 'vue';
+import { reactive, ref, watch, toRefs, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create, translate } = createComponent('calendar-item');
 import Utils from '@/packages/utils/date';
@@ -105,8 +105,8 @@ interface MonthInfo {
   curData: string[] | string;
   title: string;
   monthData: Day[];
-  cssHeight?: Number;
-  cssScrollHeight?: Number;
+  cssHeight?: number;
+  cssScrollHeight?: number;
 }
 
 export default create({
@@ -525,15 +525,15 @@ export default create({
       } else if (props.type == 'multiple' && Array.isArray(state.currDate)) {
         if (state.currDate.length > 0) {
           let defaultArr: string[] = [];
-          let obj: any = {};
-          state.currDate.forEach((item: string, index: number) => {
+          let obj: Record<string, unknown> = {};
+          state.currDate.forEach((item: string) => {
             if (
               propStartDate &&
               !Utils.compareDate(item, propStartDate) &&
               propEndDate &&
               !Utils.compareDate(propEndDate, item)
             ) {
-              if (!obj.hasOwnProperty(item)) {
+              if (!Object.hasOwnProperty.call(obj, item)) {
                 defaultArr.push(item);
                 obj[item] = item;
               }
@@ -675,7 +675,7 @@ export default create({
       return false;
     };
     // 开始结束时间是否相等
-    const rangeTip = (day: Day, month: MonthInfo) => {
+    const rangeTip = () => {
       if (state.currDate.length >= 2) {
         return Utils.isEqual(state.currDate[0], state.currDate[1]);
       }

src/sites/mobile-taro/vue/src/dentry/pages/calendar/index.vue

@@ -272,9 +272,8 @@ export default {
       state.date5 = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
     };
     const goDate = () => {
-      console.log(calendarRef.value);
       if (calendarRef.value) {
-        calendarRef.value.calendarRef.scrollToDate('2022-04-01');
+        calendarRef.value.scrollToDate('2022-04-01');
       }
     };
     return {