仿互站小程序

vant/picker-column/index.js

@@ -0,0 +1,113 @@
+var t = require("../common/component"), e = require("../common/utils");
+
+(0, t.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: function() {
+        var t = this, e = this.data, n = e.defaultIndex, i = e.initialOptions;
+        this.set({
+            currentIndex: n,
+            options: i
+        }).then(function() {
+            t.setIndex(n);
+        });
+    },
+    computed: {
+        count: function() {
+            return this.data.options.length;
+        },
+        baseOffset: function() {
+            var t = this.data;
+            return t.itemHeight * (t.visibleItemCount - 1) / 2;
+        },
+        wrapperStyle: function() {
+            var t = this.data;
+            return [ "transition: " + t.duration + "ms", "transform: translate3d(0, " + (t.offset + t.baseOffset) + "px, 0)", "line-height: " + t.itemHeight + "px" ].join("; ");
+        }
+    },
+    watch: {
+        defaultIndex: function(t) {
+            this.setIndex(t);
+        }
+    },
+    methods: {
+        onTouchStart: function(t) {
+            this.set({
+                startY: t.touches[0].clientY,
+                startOffset: this.data.offset,
+                duration: 0
+            });
+        },
+        onTouchMove: function(t) {
+            var n = this.data, i = t.touches[0].clientY - n.startY;
+            this.set({
+                offset: (0, e.range)(n.startOffset + i, -n.count * n.itemHeight, n.itemHeight)
+            });
+        },
+        onTouchEnd: function() {
+            var t = this.data;
+            if (t.offset !== t.startOffset) {
+                this.set({
+                    duration: 200
+                });
+                var n = (0, e.range)(Math.round(-t.offset / t.itemHeight), 0, t.count - 1);
+                this.setIndex(n, !0);
+            }
+        },
+        onClickItem: function(t) {
+            var e = t.currentTarget.dataset.index;
+            this.setIndex(e, !0);
+        },
+        adjustIndex: function(t) {
+            for (var n = this.data, i = t = (0, e.range)(t, 0, n.count); i < n.count; i++) if (!this.isDisabled(n.options[i])) return i;
+            for (var s = t - 1; s >= 0; s--) if (!this.isDisabled(n.options[s])) return s;
+        },
+        isDisabled: function(t) {
+            return (0, e.isObj)(t) && t.disabled;
+        },
+        getOptionText: function(t) {
+            var n = this.data;
+            return (0, e.isObj)(t) && n.valueKey in t ? t[n.valueKey] : t;
+        },
+        setIndex: function(t, e) {
+            var n = this, i = this.data, s = -(t = this.adjustIndex(t) || 0) * i.itemHeight;
+            return t !== i.currentIndex ? this.set({
+                offset: s,
+                currentIndex: t
+            }).then(function() {
+                e && n.$emit("change", t);
+            }) : this.set({
+                offset: s
+            });
+        },
+        setValue: function(t) {
+            for (var e = this.data.options, n = 0; n < e.length; n++) if (this.getOptionText(e[n]) === t) return this.setIndex(n);
+            return Promise.resolve();
+        },
+        getValue: function() {
+            var t = this.data;
+            return t.options[t.currentIndex];
+        }
+    }
+});

vant/picker-column/index.json

@@ -0,0 +1,13 @@
+{
+    "component": true,
+    "usingComponents": {
+        "forview": "/utils/forview/index",
+        "van-loading": "/vant/loading/index",
+        "van-dialog": "/vant/dialog/index",
+        "van-button": "/vant/button/index",
+        "van-icon": "/vant/icon/index",
+        "van-popup": "/vant/popup/index",
+        "van-tab": "/vant/tab/index",
+        "van-tabs": "/vant/tabs/index"
+    }
+}

vant/picker-column/index.wxml

@@ -0,0 +1,14 @@
+<view bind:touchcancel="onTouchEnd" bind:touchend="onTouchEnd" bind:touchstart="onTouchStart" catch:touchmove="onTouchMove" class="van-picker-column custom-class" style="height: {{itemHeight*visibleItemCount}}px">
+    <view style="{{wrapperStyle}}">
+        <view bindtap="onClickItem" class="van-ellipsis van-picker-column__item {{option&&option.disabled?'van-picker-column__item--disabled':''}} {{index===currentIndex?'van-picker-column__item--selected active-class':''}}" data-index="{{index}}" style="height: {{itemHeight}}px" wx:for="{{options}}" wx:for-item="option" wx:key="index">{{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[((nt_0 = (valueKey), null == nt_0 ? undefined : 'number' === typeof nt_0 ? nt_0 : "" + nt_0))] ? option[((nt_1 = (valueKey), null == nt_1 ? undefined : 'number' === typeof nt_1 ? nt_1 : "" + nt_1))] : option)
+});
+</wxs>

vant/picker-column/index.wxss

@@ -0,0 +1,21 @@
+@import "../area/index.wxss";
+
+.van-picker-column {
+    overflow: hidden;
+    font-size: 16px;
+    color: #999;
+    text-align: center;
+}
+
+.van-picker-column__item {
+    padding: 0 5px;
+}
+
+.van-picker-column__item--selected {
+    font-weight: 500;
+    color: #333;
+}
+
+.van-picker-column__item--disabled {
+    opacity: .3;
+}