[bugfix] Picker: 回滚movable-view重构

example/pages/picker/index.js

@@ -1,22 +1,25 @@
 import Page from '../../common/page';
 import Toast from '../../dist/toast/toast';
 
-const citys = {
-  '浙江': ['杭州', { text: '宁波', disabled: true }, '温州', '嘉兴', '湖州'],
-  '福建': ['福州', '厦门', '莆田', '三明', '泉州']
-};
-
 Page({
   data: {
     column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
-    column2: citys['浙江'],
+    column2: [
+      { text: '杭州', disabled: true },
+      { text: '宁波' },
+      { text: '温州' }
+    ],
+    column3: {
+      浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
+      福建: ['福州', '厦门', '莆田', '三明', '泉州']
+    },
     column4: [
       {
-        values: Object.keys(citys),
+        values: ['浙江', '福建'],
         className: 'column1'
       },
       {
-        values: citys['浙江'],
+        values: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
         className: 'column2',
         defaultIndex: 2
       }
@@ -39,6 +42,7 @@ Page({
 
   onChange2(event) {
     const { picker, value } = event.detail;
-    picker.setColumnValues(1, citys[value[0]]);
+    picker.setColumnValues(1, this.data.column3[value[0]]);
+    getApp().picker = picker;
   }
 });

packages/picker-column/index.less

@@ -1,12 +1,7 @@
 @import '../common/style/var';
 
-:host {
-  overflow: hidden;
-}
-
 .van-picker-column {
-  width: 100%;
-  overflow: visible;
+  overflow: hidden;
   font-size: 16px;
   text-align: center;
 

packages/picker-column/index.ts

@@ -1,13 +1,7 @@
 import { VantComponent } from '../common/component';
 import { isObj, range } from '../common/utils';
 
-function isDisabled(option: any) {
-  return isObj(option) && option.disabled;
-}
-
-function getOptionText(option: any, valueKey: string) {
-  return isObj(option) && valueKey in option ? option[valueKey] : option;
-}
+const DEFAULT_DURATION = 200;
 
 VantComponent({
   classes: ['active-class'],
@@ -23,18 +17,17 @@ VantComponent({
     },
     defaultIndex: {
       type: Number,
-      value: 0,
-      observer(value) {
-        this.setIndex(value);
-      }
+      value: 0
     }
   },
 
   data: {
+    startY: 0,
     offset: 0,
+    duration: 0,
+    startOffset: 0,
     options: [],
-    currentIndex: 0,
-    animation: false
+    currentIndex: 0
   },
 
   created() {
@@ -43,38 +36,71 @@ VantComponent({
     this.set({
       currentIndex: defaultIndex,
       options: initialOptions
-    }).then(() => this.setIndex(defaultIndex));
+    }).then(() => {
+      this.setIndex(defaultIndex);
+    });
+  },
+
+  computed: {
+    count() {
+      return this.data.options.length;
+    },
+
+    baseOffset() {
+      const { data } = this;
+      return (data.itemHeight * (data.visibleItemCount - 1)) / 2;
+    },
+
+    wrapperStyle() {
+      const { data } = this;
+      return [
+        `transition: ${data.duration}ms`,
+        `transform: translate3d(0, ${data.offset + data.baseOffset}px, 0)`,
+        `line-height: ${data.itemHeight}px`
+      ].join('; ');
+    }
+  },
+
+  watch: {
+    defaultIndex(value: number) {
+      this.setIndex(value);
+    }
   },
 
   methods: {
-    onChange(event: Weapp.Event) {
-      if (!event.detail.source) {
-        return;
-      }
-
-      this.offset = event.detail.y;
+    onTouchStart(event: Weapp.TouchEvent) {
+      this.set({
+        startY: event.touches[0].clientY,
+        startOffset: this.data.offset,
+        duration: 0
+      });
     },
 
-    onTouchStart() {
-      // open animate at first touch
-      if (!this.data.animation) {
-        this.set({ animation: true });
-      }
+    onTouchMove(event: Weapp.TouchEvent) {
+      const { data } = this;
+      const deltaY = event.touches[0].clientY - data.startY;
+      this.set({
+        offset: range(
+          data.startOffset + deltaY,
+          -(data.count * data.itemHeight),
+          data.itemHeight
+        )
+      });
     },
 
     onTouchEnd() {
-      const { options = [], itemHeight, offset } = this.data;
-
-      if (this.offset === offset) {
-        return;
+      const { data } = this;
+      if (data.offset !== data.startOffset) {
+        this.set({
+          duration: DEFAULT_DURATION
+        });
+        const index = range(
+          Math.round(-data.offset / data.itemHeight),
+          0,
+          data.count - 1
+        );
+        this.setIndex(index, true);
       }
-
-      const index = range(
-        Math.round(-this.offset / itemHeight),
-        0,
-        options.length - 1
-      );
-      this.setIndex(index, true);
     },
 
     onClickItem(event: Weapp.Event) {
@@ -83,27 +109,33 @@ VantComponent({
     },
 
     adjustIndex(index: number) {
-      const { options = [] } = this.data;
-      const count = options.length;
-      index = range(index, 0, count);
-
-      for (let i = index; i < count; i++) {
-        if (!isDisabled(options[i])) return i;
+      const { data } = this;
+      index = range(index, 0, data.count);
+      for (let i = index; i < data.count; i++) {
+        if (!this.isDisabled(data.options[i])) return i;
       }
       for (let i = index - 1; i >= 0; i--) {
-        if (!isDisabled(options[i])) return i;
+        if (!this.isDisabled(data.options[i])) return i;
       }
-      return 0;
+    },
+
+    isDisabled(option: any) {
+      return isObj(option) && option.disabled;
+    },
+
+    getOptionText(option: any) {
+      const { data } = this;
+      return isObj(option) && data.valueKey in option
+        ? option[data.valueKey]
+        : option;
     },
 
     setIndex(index: number, userAction: boolean) {
-      const { itemHeight, currentIndex } = this.data;
-      index = this.adjustIndex(index);
-      const offset = -index * itemHeight;
+      const { data } = this;
+      index = this.adjustIndex(index) || 0;
+      const offset = -index * data.itemHeight;
 
-      this.offset = offset;
-
-      if (index !== currentIndex) {
+      if (index !== data.currentIndex) {
         return this.set({ offset, currentIndex: index }).then(() => {
           userAction && this.$emit('change', index);
         });
@@ -113,17 +145,18 @@ VantComponent({
     },
 
     setValue(value: string) {
-      const { options = [], valueKey } = this.data;
-
-      const index = options.findIndex(
-        (item: any) => getOptionText(item, valueKey) === value
-      );
-      return index !== -1 ? this.setIndex(index) : Promise.resolve();
+      const { options } = this.data;
+      for (let i = 0; i < options.length; i++) {
+        if (this.getOptionText(options[i]) === value) {
+          return this.setIndex(i);
+        }
+      }
+      return Promise.resolve();
     },
 
     getValue() {
-      const { options = [], currentIndex } = this.data;
-      return options[currentIndex];
+      const { data } = this;
+      return data.options[data.currentIndex];
     }
   }
 });

packages/picker-column/index.wxml

@@ -1,27 +1,31 @@
-<wxs src="../wxs/utils.wxs" module="utils" />
-
-<movable-area
+<view
   class="van-picker-column custom-class"
-  style="height: {{ itemHeight }}px; top: {{ itemHeight * (visibleItemCount - 1) / 2 }}px;"
+  style="height: {{ itemHeight * visibleItemCount }}px"
+  bind:touchstart="onTouchStart"
+  catch:touchmove="onTouchMove"
+  bind:touchend="onTouchEnd"
+  bind:touchcancel="onTouchEnd"
 >
-  <movable-view
-    direction="vertical"
-    out-of-bounds
-    damping="{{ 50 }}"
-    y="{{ offset }}"
-    animation="{{ animation }}"
-    style="line-height: {{ itemHeight }}px; width: 100%; height: {{ itemHeight * options.length }}px;"
-    bindchange="onChange"
-    bindtouchstart="onTouchStart"
-    bindtouchend="onTouchEnd"
-  >
+  <view style="{{ wrapperStyle }}">
     <view
       wx:for="{{ options }}"
+      wx:for-item="option"
       wx:key="index"
       data-index="{{ index }}"
       style="height: {{ itemHeight }}px"
-      class="van-ellipsis {{ utils.bem('picker-column__item', { disabled: item && item.disabled, selected: index === currentIndex }) }} {{ index === currentIndex ? 'active-class' : '' }}"
+      class="van-ellipsis van-picker-column__item {{ option && option.disabled ? 'van-picker-column__item--disabled' : '' }} {{ index === currentIndex ? 'van-picker-column__item--selected active-class' : '' }}"
       bindtap="onClickItem"
-    >{{ item && item[valueKey] ? item[valueKey] : item }}</view>
-  </movable-view>
-</movable-area>
+    >{{ getOptionText(option, valueKey) }}</view>
+  </view>
+</view>
+
+<wxs module="getOptionText">
+function isObj(x) {
+  var type = typeof x;
+  return x !== null && (type === 'object' || type === 'function');
+}
+
+module.exports = function (option, valueKey) {
+  return isObj(option) && option[valueKey] ? option[valueKey] : option;
+}
+</wxs>

packages/picker/README.md

@@ -117,7 +117,7 @@ Page({
 
 ```javascript
 const citys = {
-  '浙江': ['杭州', { text: '宁波', disabled: true }, '温州', '嘉兴', '湖州'],
+  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'],
   '福建': ['福州', '厦门', '莆田', '三明', '泉州']
 };
 

packages/picker/index.wxml

@@ -32,17 +32,17 @@
     catch:touchmove="noop"
   >
     <picker-column
+      class="van-picker__column"
       wx:for="{{ isSimple(columns) ? [columns] : columns }}"
       wx:key="{{ index }}"
-      class="van-picker__column"
+      data-index="{{ index }}"
+      custom-class="column-class"
       value-key="{{ valueKey }}"
       initial-options="{{ isSimple(columns) ? item : item.values }}"
       default-index="{{ item.defaultIndex || defaultIndex }}"
       item-height="{{ itemHeight }}"
       visible-item-count="{{ visibleItemCount }}"
-      custom-class="column-class"
       active-class="active-class"
-      data-index="{{ index }}"
       bind:change="onChange"
     />
     <view