fix: Picker新增点击确定停止滚动逻辑 (#1586)

* fix: picker 解决惯性滚动问题

* feat: taro-picker 问题修改

* fix: 组件picker新增点击确定停止滚动逻辑

src/packages/__VUE/picker/Column.vue

@@ -275,6 +275,7 @@ export default create({
     // 惯性滚动结束
     const stopMomentum = () => {
       moving.value = false;
+      touchTime.value = 0;
       setChooseValue();
     };
 

src/packages/__VUE/picker/ColumnTaro.vue

@@ -283,6 +283,7 @@ export default create({
     // 惯性滚动结束
     const stopMomentum = () => {
       moving.value = false;
+      touchTime.value = 0;
       setChooseValue();
     };
 
@@ -295,8 +296,10 @@ export default create({
     watch(
       () => props.column,
       (val) => {
-        state.transformY = 0;
-        modifyStatus(false);
+        if (props.column && props.column.length > 0) {
+          state.transformY = 0;
+          modifyStatus(false);
+        }
       },
       {
         deep: true
@@ -314,22 +317,6 @@ export default create({
       }
     );
 
-    watch(
-      () => props.itemShow,
-      (val) => {
-        if (val) {
-          setTimeout(() => {
-            getReference();
-          }, 200);
-        } else {
-          state.transformY = 0;
-        }
-      },
-      {
-        deep: true
-      }
-    );
-
     onMounted(() => {
       setTimeout(() => {
         getReference();

src/packages/__VUE/picker/demo.vue

@@ -129,25 +129,6 @@
     >
       <nut-button block type="primary" @click="alwaysFun">{{ translate('always') }}</nut-button></nut-picker
     >
-
-    <!-- <h2>异步获取</h2>
-    <nut-cell
-      :title="translate('validTime')"
-      :desc="effect"
-      @click="
-        () => {
-          showJK = true;
-        }
-      "
-    ></nut-cell>
-    <nut-picker
-      v-model:visible="showJK"
-      :columns="jkColumns"
-      :title="translate('chooseDate')"
-      @confirm="(options) => confirm('effect', options)"
-      @change="changeJK"
-    ></nut-picker
-    > -->
   </div>
 </template>
 <script lang="ts">

src/packages/__VUE/picker/index.scss

@@ -46,6 +46,7 @@
     align-items: center;
     justify-content: center;
     min-width: 50px;
+    height: 100%;
   }
   &__left {
     color: $picker-cancel-color;

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

@@ -23,6 +23,7 @@
         <view class="nut-picker__hairline"></view>
         <view class="nut-picker__columnitem" v-for="(column, columnIndex) in columnsList" :key="columnIndex">
           <nut-picker-column
+            :ref="swipeRef"
             :itemShow="show"
             :column="column"
             :readonly="readonly"
@@ -101,6 +102,14 @@ export default create({
     // 选中项
     let defaultValues = ref<(number | string)[]>(props.modelValue);
 
+    const pickerColumn = ref<any[]>([]);
+
+    const swipeRef = (el: any) => {
+      if (el && pickerColumn.value.length < columnsList.value.length) {
+        pickerColumn.value.push(el);
+      }
+    };
+
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
@@ -207,6 +216,11 @@ export default create({
     };
 
     const confirmHandler = () => {
+      pickerColumn.value.length > 0 &&
+        pickerColumn.value.forEach((column) => {
+          column.stopMomentum();
+        });
+
       if (defaultValues.value && !defaultValues.value.length) {
         columnsList.value.forEach((columns) => {
           defaultValues.value.push(columns[0].value);
@@ -222,7 +236,6 @@ export default create({
     };
 
     onMounted(() => {
-      console.log('更新');
       if (props.visible) state.show = props.visible;
     });
 
@@ -256,6 +269,8 @@ export default create({
       () => props.visible,
       (val) => {
         state.show = val;
+        console.log(defaultValues.value);
+        if (val) pickerColumn.value = [];
       }
     );
 
@@ -276,7 +291,9 @@ export default create({
       changeHandler,
       confirmHandler,
       defaultValues,
-      translate
+      translate,
+      pickerColumn,
+      swipeRef
     };
   }
 });

src/packages/__VUE/picker/index.vue

@@ -26,6 +26,7 @@
         <view class="nut-picker__hairline"></view>
         <view class="nut-picker__columnitem" v-for="(column, columnIndex) in columnsList" :key="columnIndex">
           <nut-picker-column
+            :ref="swipeRef"
             :itemShow="show"
             :column="column"
             :readonly="readonly"
@@ -52,7 +53,6 @@ import { createComponent } from '@/packages/utils/create';
 import popup, { popupProps } from '../popup/index.vue';
 import column from './Column.vue';
 const { componentName, create, translate } = createComponent('picker');
-// import { PickerColumnOption, PickerOption, TouchParams } from './types';
 
 export interface PickerOption {
   text: string | number;
@@ -116,7 +116,13 @@ export default create({
     // 选中项
     let defaultValues = ref<(number | string)[]>(props.modelValue);
 
-    const wrapHeight = ref();
+    const pickerColumn = ref<any[]>([]);
+
+    const swipeRef = (el: any) => {
+      if (el && pickerColumn.value.length < columnsList.value.length) {
+        pickerColumn.value.push(el);
+      }
+    };
 
     const classes = computed(() => {
       const prefixCls = componentName;
@@ -223,9 +229,13 @@ export default create({
     };
 
     const confirmHandler = () => {
+      pickerColumn.value.length > 0 &&
+        pickerColumn.value.forEach((column) => {
+          column.stopMomentum();
+        });
+
       if (defaultValues.value && !defaultValues.value.length) {
         columnsList.value.forEach((columns) => {
-          // console.log(columns);
           defaultValues.value.push(columns[0].value);
           selectedOptions.value.push(columns[0]);
         });
@@ -272,6 +282,7 @@ export default create({
       () => props.visible,
       (val) => {
         state.show = val;
+        if (val) pickerColumn.value = [];
       }
     );
 
@@ -292,7 +303,9 @@ export default create({
       changeHandler,
       confirmHandler,
       defaultValues,
-      translate
+      translate,
+      pickerColumn,
+      swipeRef
     };
   }
 });