fix(taro-ui-vue): H5 calendar swipe event

Author: pengshanglong

packages/taro-ui-vue/src/components/calendar/body/index.js

@@ -3,18 +3,11 @@ import classnames from 'classnames'
 import dayjs from 'dayjs'
 import { delayQuerySelector } from '../../../utils/common'
 import generateCalendarGroup from '../common/helper'
-import AtCalendarDateList from '../ui/date-list/index.vue'
-import AtCalendarDayList from '../ui/day-list/index.vue'
 import mixins from '../../mixins'
 
 const ANIMTE_DURATION = 300
 
 const AtCalendarBody = Vue.extend({
-  name: 'AtCalendarBody',
-  components: {
-    AtCalendarDateList,
-    AtCalendarDayList,
-  },
   mixins: [mixins],
   props: {
     marks: {
@@ -62,12 +55,22 @@ const AtCalendarBody = Vue.extend({
     },
     onDayClick: {
       type: Function,
-      default: () => () => {},
+      default: function() {
+        return () => {}
+      },
     },
     onLongClick: {
       type: Function,
-      default: () => () => {},
+      default: function() {
+        return () => {}
+      },
     },
+    onSwipeMonth: {
+      type: Function,
+      default: function() {
+        return () => {}
+      }
+    }
   },
   data() {
     const { validDates, marks, format, minDate, maxDate, selectedDates } = this
@@ -93,6 +96,7 @@ const AtCalendarBody = Vue.extend({
         offsetSize: 0,
         isAnimate: false,
       },
+      isH5: process.env.TARO_ENV === 'h5',
     }
   },
   computed: {
@@ -118,6 +122,32 @@ const AtCalendarBody = Vue.extend({
         selectedDates,
       }
     },
+    h5CalendarBody() {
+      return classnames(
+        'main',
+        'at-calendar-slider__main',
+        `at-calendar-slider__main--${process.env.TARO_ENV}`
+      )
+    },
+    h5CalendarMainBodyCls() {
+      const { isSwiper, isAnimate } = this
+      return classnames('main__body  body', {
+        'main__body--slider': isSwiper,
+        'main__body--animate': isAnimate
+      })
+    },
+    h5CalendarMainBodyStyle() {
+      const { isSwiper } = this
+      const { offsetSize } = this.state
+      return {
+        transform: isSwiper
+          ? `translateX(-100%) translate3d(${offsetSize},0,0)`
+          : '',
+        WebkitTransform: isSwiper
+          ? `translateX(-100%) translate3d(${offsetSize}px,0,0)`
+          : ''
+      }
+    }
   },
   watch: {
     nextProps(val) {
@@ -155,7 +185,9 @@ const AtCalendarBody = Vue.extend({
   },
   mounted() {
     delayQuerySelector(this, '.at-calendar-slider__main').then((res) => {
-      this.maxWidth = res[0].width
+      if (res[0]) {
+        this.maxWidth = res[0].width
+      }
     })
   },
   methods: {
@@ -241,7 +273,7 @@ const AtCalendarBody = Vue.extend({
       if (absOffsetSize > breakpoint) {
         const res = isRight ? this.maxWidth : -this.maxWidth
         return this.animateMoveSlide(res, () => {
-          this.atSwipeMonth(isRight ? -1 : 1)
+          this.onSwipeMonth(isRight ? -1 : 1)
         })
       }
       this.animateMoveSlide(0)
@@ -256,7 +288,7 @@ const AtCalendarBody = Vue.extend({
     },
     handleAnimateFinish() {
       if (this.changeCount > 0) {
-        this.atSwipeMonth(this.isPreMonth ? -this.changeCount : this.changeCount)
+        this.onSwipeMonth(this.isPreMonth ? -this.changeCount : this.changeCount)
         this.changeCount = 0
       }
     },

packages/taro-ui-vue/src/components/calendar/body/index.vue

@@ -10,12 +10,46 @@
             :list="state.listGroup[1].list"
             :on-click="onDayClick"
             :on-long-click="onLongClick"
+          ></AtCalendarDateList>
+        </view>
+      </view>
+    </view>
+    <view
+      v-if="isH5"
+      :class="h5CalendarBody"
+      @touchend="handleTouchEnd"
+      @touchmove="handleTouchMove"
+      @touchstart="handleTouchStart"
+    >
+      <AtCalendarDayList />
+      <view
+        :class="h5CalendarMainBodyCls"
+        :style="h5CalendarMainBodyStyle"
+      >
+        <view class='body__slider body__slider--pre'>
+          <AtCalendarDateList 
+            :key="state.listGroup[0].value" 
+            :list="state.listGroup.length ? state.listGroup[0].list : []" 
+          />
+        </view>
+        <view class='body__slider body__slider--now'>
+          <AtCalendarDateList
+            :key="state.listGroup[1].value"
+            :list="state.listGroup.length ? state.listGroup[1].list : []"
+            :on-click="onDayClick"
+            :on-long-click="onLongClick"
+          />
+        </view>
+        <view class='body__slider body__slider--next'>
+          <AtCalendarDateList 
+            :key="state.listGroup[2].value"
+            :list="state.listGroup.length ? state.listGroup[2].list : []" 
           />
         </view>
       </view>
     </view>
     <view
-      v-else
+      v-if="isSwiper && !isH5"
       :class="getCls">
       <AtCalendarDayList />
       <swiper
@@ -24,16 +58,17 @@
         skipHiddenItemLayout
         class="main__body"
         :vertical="isVertical"
-        :on-change="handleChange"
-        :on-animation-finish="handleAnimateFinish"
-        :on-touch-end="handleSwipeTouchEnd"
-        :on-touch-start="handleSwipeTouchStart"
+        @change="handleChange"
+        @animationfinish="handleAnimateFinish"
+        @touchend="handleSwipeTouchEnd"
+        @touchstart="handleSwipeTouchStart"
       >
         <swiper-item 
-          v-for="(item, key) in state.listGroup" 
-          :key="item.value" 
+          v-for="(item, key) in state.listGroup"
+          :key="key.toString()" 
           :itemId="key.toString()">
           <AtCalendarDateList
+            :key="item.value" 
             :list="item.list"
             :on-click="onDayClick"
             :on-long-click="onLongClick"
@@ -45,5 +80,14 @@
 </template>
 <script>
 import AtCalendarBody from './index';
-export default AtCalendarBody
+import AtCalendarDateList from '../ui/date-list/index.vue'
+import AtCalendarDayList from '../ui/day-list/index.vue'
+export default {
+  name: 'AtCalendarBody',
+  mixins: [AtCalendarBody],
+  components: {
+    AtCalendarDateList,
+    AtCalendarDayList,
+  },
+}
 </script>