vant

utils/dist/picker-column/index.d.ts

@@ -0,0 +1 @@
+export {};

utils/dist/picker-column/index.js

@@ -0,0 +1,119 @@
+import { VantComponent } from '../common/component';
+import { isObj, range } from '../common/utils';
+const DEFAULT_DURATION = 200;
+VantComponent({
+    classes: ['active-class'],
+    props: {
+        valueKey: String,
+        className: String,
+        itemHeight: Number,
+        visibleItemCount: Number,
+        initialOptions: {
+            type: Array,
+            value: []
+        },
+        defaultIndex: {
+            type: Number,
+            value: 0
+        }
+    },
+    data: {
+        startY: 0,
+        offset: 0,
+        duration: 0,
+        startOffset: 0,
+        options: [],
+        currentIndex: 0
+    },
+    created() {
+        const { defaultIndex, initialOptions } = this.data;
+        this.set({
+            currentIndex: defaultIndex,
+            options: initialOptions
+        }).then(() => {
+            this.setIndex(defaultIndex);
+        });
+    },
+    watch: {
+        defaultIndex(value) {
+            this.setIndex(value);
+        }
+    },
+    methods: {
+        getCount() {
+            return this.data.options.length;
+        },
+        onTouchStart(event) {
+            this.setData({
+                startY: event.touches[0].clientY,
+                startOffset: this.data.offset,
+                duration: 0
+            });
+        },
+        onTouchMove(event) {
+            const { data } = this;
+            const deltaY = event.touches[0].clientY - data.startY;
+            this.setData({
+                offset: range(data.startOffset + deltaY, -(this.getCount() * data.itemHeight), data.itemHeight)
+            });
+        },
+        onTouchEnd() {
+            const { data } = this;
+            if (data.offset !== data.startOffset) {
+                this.setData({ duration: DEFAULT_DURATION });
+                const index = range(Math.round(-data.offset / data.itemHeight), 0, this.getCount() - 1);
+                this.setIndex(index, true);
+            }
+        },
+        onClickItem(event) {
+            const { index } = event.currentTarget.dataset;
+            this.setIndex(index, true);
+        },
+        adjustIndex(index) {
+            const { data } = this;
+            const count = this.getCount();
+            index = range(index, 0, count);
+            for (let i = index; i < count; i++) {
+                if (!this.isDisabled(data.options[i]))
+                    return i;
+            }
+            for (let i = index - 1; i >= 0; i--) {
+                if (!this.isDisabled(data.options[i]))
+                    return i;
+            }
+        },
+        isDisabled(option) {
+            return isObj(option) && option.disabled;
+        },
+        getOptionText(option) {
+            const { data } = this;
+            return isObj(option) && data.valueKey in option
+                ? option[data.valueKey]
+                : option;
+        },
+        setIndex(index, userAction) {
+            const { data } = this;
+            index = this.adjustIndex(index) || 0;
+            const offset = -index * data.itemHeight;
+            if (index !== data.currentIndex) {
+                return this.set({ offset, currentIndex: index }).then(() => {
+                    userAction && this.$emit('change', index);
+                });
+            }
+            return this.set({ offset });
+        },
+        setValue(value) {
+            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 { data } = this;
+            return data.options[data.currentIndex];
+        }
+    }
+});

utils/dist/picker-column/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

utils/dist/picker-column/index.wxml

@@ -0,0 +1,22 @@
+<wxs src="./index.wxs" module="getOptionText" />
+
+<view
+  class="van-picker-column custom-class"
+  style="height: {{ itemHeight * visibleItemCount }}px"
+  bind:touchstart="onTouchStart"
+  catch:touchmove="onTouchMove"
+  bind:touchend="onTouchEnd"
+  bind:touchcancel="onTouchEnd"
+>
+  <view style="transition: transform {{ duration }}ms; line-height: {{ itemHeight }}px; transform: translate3d(0, {{ offset + (itemHeight * (visibleItemCount - 1)) / 2 }}px, 0)">
+    <view
+      wx:for="{{ options }}"
+      wx:for-item="option"
+      wx:key="index"
+      data-index="{{ index }}"
+      style="height: {{ itemHeight }}px"
+      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"
+    >{{ getOptionText(option, valueKey) }}</view>
+  </view>
+</view>

utils/dist/picker-column/index.wxs

@@ -0,0 +1,8 @@
+function isObj(x) {
+  var type = typeof x;
+  return x !== null && (type === 'object' || type === 'function');
+}
+
+module.exports = function (option, valueKey) {
+  return isObj(option) && option[valueKey] != null ? option[valueKey] : option;
+}

utils/dist/picker-column/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-picker-column{overflow:hidden;text-align:center;color:#000;color:var(--picker-option-text-color,#000);font-size:16px;font-size:var(--picker-option-font-size,16px)}.van-picker-column__item{padding:0 5px}.van-picker-column__item--selected{font-weight:500;font-weight:var(--font-weight-bold,500);color:#323233;color:var(--picker-option-selected-text-color,#323233)}.van-picker-column__item--disabled{opacity:.3;opacity:var(--picker-option-disabled-opacity,.3)}