仿互站小程序

vant/swipe-cell/index.js

@@ -0,0 +1,68 @@
+var t = require("../common/component"), i = require("../mixins/touch");
+
+(0, t.VantComponent)({
+    props: {
+        disabled: Boolean,
+        leftWidth: {
+            type: Number,
+            value: 0
+        },
+        rightWidth: {
+            type: Number,
+            value: 0
+        },
+        asyncClose: Boolean
+    },
+    mixins: [ i.touch ],
+    data: {
+        catchMove: !0
+    },
+    created: function() {
+        this.offset = 0;
+    },
+    methods: {
+        open: function(t) {
+            var i = this.data, s = i.leftWidth, e = i.rightWidth, n = "left" === t ? s : -e;
+            this.swipeMove(n);
+        },
+        close: function() {
+            this.swipeMove(0);
+        },
+        swipeMove: function() {
+            var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0;
+            this.offset = t;
+            var i = "translate3d(" + t + "px, 0, 0)", s = this.draging ? "none" : ".6s cubic-bezier(0.18, 0.89, 0.32, 1)";
+            this.set({
+                wrapperStyle: "\n        -webkit-transform: " + i + ";\n        -webkit-transition: " + s + ";\n        transform: " + i + ";\n        transition: " + s + ";\n      "
+            });
+        },
+        swipeLeaveTransition: function() {
+            var t = this.data, i = t.leftWidth, s = t.rightWidth, e = this.offset;
+            s > 0 && -e > .3 * s ? this.open("right") : i > 0 && e > .3 * i ? this.open("left") : this.swipeMove(0);
+        },
+        startDrag: function(t) {
+            this.data.disabled || (this.draging = !0, this.startOffset = this.offset, this.firstDirection = "", 
+            this.touchStart(t));
+        },
+        noop: function() {},
+        onDrag: function(t) {
+            if (!this.data.disabled && (this.touchMove(t), this.firstDirection || (this.firstDirection = this.direction, 
+            this.set({
+                catchMove: "horizontal" === this.firstDirection
+            })), "vertical" !== this.firstDirection)) {
+                var i = this.data, s = i.leftWidth, e = i.rightWidth, n = this.startOffset + this.deltaX;
+                e > 0 && -n > e || s > 0 && n > s || this.swipeMove(n);
+            }
+        },
+        endDrag: function() {
+            this.data.disabled || (this.draging = !1, this.swipeLeaveTransition());
+        },
+        onClick: function(t) {
+            var i = t.currentTarget.dataset.key, s = void 0 === i ? "outside" : i;
+            this.$emit("click", s), this.offset && (this.data.asyncClose ? this.$emit("close", {
+                position: s,
+                instance: this
+            }) : this.swipeMove(0));
+        }
+    }
+});

vant/swipe-cell/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/swipe-cell/index.wxml

@@ -0,0 +1,11 @@
+<view bindtouchstart="startDrag" capture-bind:touchmove="onDrag" catchtap="onClick" catchtouchcancel="endDrag" catchtouchend="endDrag" catchtouchmove="{{catchMove?'noop':''}}" class="van-swipe-cell" data-key="cell">
+    <view style="{{wrapperStyle}}">
+        <view catch:tap="onClick" class="van-swipe-cell__left" data-key="left" wx:if="{{leftWidth}}">
+            <slot name="left"></slot>
+        </view>
+        <slot></slot>
+        <view catch:tap="onClick" class="van-swipe-cell__right" data-key="right" wx:if="{{rightWidth}}">
+            <slot name="right"></slot>
+        </view>
+    </view>
+</view>

vant/swipe-cell/index.wxss

@@ -0,0 +1,22 @@
+@import "../area/index.wxss";
+
+.van-swipe-cell {
+    position: relative;
+    overflow: hidden;
+}
+
+.van-swipe-cell__left,.van-swipe-cell__right {
+    position: absolute;
+    top: 0;
+    height: 100%;
+}
+
+.van-swipe-cell__left {
+    left: 0;
+    transform: translate3d(-100%,0,0);
+}
+
+.van-swipe-cell__right {
+    right: 0;
+    transform: translate3d(100%,0,0);
+}