perf: ⚡ 优化Calendar日历选择器打开关闭时的动画效果

Author: Moonofweisheng

src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue

@@ -60,7 +60,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onBeforeMount, ref, watch } from 'vue'
 import { debounce, isArray, isEqual, isNumber, requestAnimationFrame } from '../../common/util'
 import { compareMonth, formatMonthTitle, getMonthEndDay, getMonths, getTimeData, getWeekLabel } from '../utils'
 import Month from '../month/month.vue'
@@ -136,7 +136,7 @@ watch(
   }
 )
 
-onMounted(() => {
+onBeforeMount(() => {
   scrollIntoView()
 })
 

src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue

@@ -31,9 +31,9 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, nextTick } from 'vue'
+import { computed, ref, onBeforeMount } from 'vue'
 import { compareYear, formatYearTitle, getYears } from '../utils'
-import { isArray, isNumber } from '../../common/util'
+import { isArray, isNumber, requestAnimationFrame } from '../../common/util'
 import Year from '../year/year.vue'
 import { yearPanelProps, type YearInfo, type YearPanelExpose } from './types'
 
@@ -62,25 +62,12 @@ const years = computed(() => {
 
 const emit = defineEmits(['change'])
 
-onMounted(() => {
+onBeforeMount(() => {
   scrollIntoView()
 })
 
-const requestAnimationFrame = (cb = () => {}) => {
-  return new Promise((resolve, reject) => {
-    uni
-      .createSelectorQuery()
-      .selectViewport()
-      .boundingClientRect()
-      .exec(() => {
-        resolve(true)
-        cb()
-      })
-  })
-}
-
 function scrollIntoView() {
-  requestAnimationFrame().then(() => {
+  requestAnimationFrame(() => {
     let activeDate: number | null = null
     if (isArray(props.value)) {
       activeDate = props.value![0]
@@ -102,7 +89,7 @@ function scrollIntoView() {
       top += yearsInfo[index] ? Number(yearsInfo[index].height) : 0
     }
     scrollTop.value = 0
-    nextTick(() => {
+    requestAnimationFrame(() => {
       scrollTop.value = top
     })
   })

src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue

@@ -117,7 +117,7 @@ export default {
 <script lang="ts" setup>
 import { ref, computed, watch } from 'vue'
 import { dayjs } from '../common/dayjs'
-import { deepClone, isArray, isEqual, padZero } from '../common/util'
+import { deepClone, isArray, isEqual, padZero, requestAnimationFrame } from '../common/util'
 import { getWeekNumber, isRange } from '../wd-calendar-view/utils'
 import { useCell } from '../composables/useCell'
 import { FORM_KEY, type FormItemRule } from '../wd-form/types'
@@ -319,7 +319,9 @@ function open() {
   lastCalendarValue.value = deepClone(calendarValue.value)
   lastTab.value = currentTab.value
   lastCurrentType.value = currentType.value
-  scrollIntoView()
+  requestAnimationFrame(() => {
+    scrollIntoView()
+  })
 
   setTimeout(() => {
     if (props.showTypeSwitch) {
@@ -331,7 +333,6 @@ function open() {
 // 对外暴露方法
 function close() {
   pickerShow.value = false
-  scrollIntoView()
   setTimeout(() => {
     calendarValue.value = deepClone(lastCalendarValue.value)
     currentTab.value = lastTab.value