From c9b52c0aab9a8474e5dc28eca4e72c6f5c0beff9 Mon Sep 17 00:00:00 2001 From: rex-zsd Date: Thu, 11 Apr 2019 16:56:38 +0800 Subject: [PATCH] [build] 0.5.10 --- dist/collapse-item/index.js | 52 ++++++++++---------- dist/collapse-item/index.wxml | 3 +- dist/collapse-item/index.wxss | 2 +- dist/collapse/index.js | 37 ++++++-------- dist/mixins/touch.js | 12 +++-- dist/swipe-cell/index.js | 92 ++++++++++++++++------------------- dist/swipe-cell/index.wxml | 8 ++- lib/collapse-item/index.js | 53 ++++++++++---------- lib/collapse-item/index.wxml | 3 +- lib/collapse-item/index.wxss | 2 +- lib/collapse/index.js | 37 ++++++-------- lib/mixins/touch.js | 12 +++-- lib/swipe-cell/index.js | 82 ++++++++++++++----------------- lib/swipe-cell/index.wxml | 8 ++- 14 files changed, 194 insertions(+), 209 deletions(-) diff --git a/dist/collapse-item/index.js b/dist/collapse-item/index.js index d8e9b0bf..e7b726ef 100644 --- a/dist/collapse-item/index.js +++ b/dist/collapse-item/index.js @@ -1,4 +1,5 @@ import { VantComponent } from '../common/component'; +const nextTick = () => new Promise(resolve => setTimeout(resolve, 20)); VantComponent({ classes: ['title-class', 'content-class'], relation: { @@ -26,48 +27,49 @@ VantComponent({ }, data: { contentHeight: 0, - expanded: false + expanded: false, + transition: false }, - beforeCreate() { - this.animation = wx.createAnimation({ - duration: 300, - timingFunction: 'ease-in-out' + mounted() { + this.updateExpanded() + .then(nextTick) + .then(() => { + this.set({ transition: true }); }); }, methods: { updateExpanded() { if (!this.parent) { - return null; + return Promise.resolve(); } - const { value, accordion, items } = this.parent.data; + const { value, accordion } = this.parent.data; + const { children = [] } = this.parent; const { name } = this.data; - const index = items.indexOf(this); + const index = children.indexOf(this); const currentName = name == null ? index : name; const expanded = accordion ? value === currentName - : value.some(name => name === currentName); + : (value || []).some((name) => name === currentName); + const stack = []; if (expanded !== this.data.expanded) { - this.updateStyle(expanded); + stack.push(this.updateStyle(expanded)); } - this.set({ index, expanded }); + stack.push(this.set({ index, expanded })); + return Promise.all(stack); }, updateStyle(expanded) { - this.getRect('.van-collapse-item__content').then(res => { - const animationData = this.animation - .height(expanded ? res.height : 0) - .step() - .export(); + return this.getRect('.van-collapse-item__content') + .then((rect) => rect.height) + .then((height) => { if (expanded) { - this.set({ animationData }); + return this.set({ + contentHeight: height ? `${height}px` : 'auto' + }); } else { - this.set({ - contentHeight: res.height + 'px' - }, () => { - setTimeout(() => { - this.set({ animationData }); - }, 20); - }); + return this.set({ contentHeight: `${height}px` }) + .then(nextTick) + .then(() => this.set({ contentHeight: 0 })); } }); }, @@ -76,7 +78,7 @@ VantComponent({ return; } const { name, expanded } = this.data; - const index = this.parent.data.items.indexOf(this); + const index = this.parent.children.indexOf(this); const currentName = name == null ? index : name; this.parent.switch(currentName, !expanded); }, diff --git a/dist/collapse-item/index.wxml b/dist/collapse-item/index.wxml index b39e4cea..a3fe5a8f 100644 --- a/dist/collapse-item/index.wxml +++ b/dist/collapse-item/index.wxml @@ -30,9 +30,8 @@ /> { - child.updateExpanded(); - }); + this.children.push(child); } }, props: { - value: null, - accordion: Boolean, + value: { + type: null, + observer: 'updateExpanded' + }, + accordion: { + type: Boolean, + observer: 'updateExpanded' + }, border: { type: Boolean, value: true } }, - data: { - items: [] + beforeCreate() { + this.children = []; }, - watch: { - value() { - this.data.items.forEach(child => { + methods: { + updateExpanded() { + this.children.forEach((child) => { child.updateExpanded(); }); }, - accordion() { - this.data.items.forEach(child => { - child.updateExpanded(); - }); - } - }, - methods: { switch(name, expanded) { const { accordion, value } = this.data; if (!accordion) { name = expanded - ? value.concat(name) - : value.filter(activeName => activeName !== name); + ? (value || []).concat(name) + : (value || []).filter((activeName) => activeName !== name); } else { name = expanded ? name : ''; diff --git a/dist/mixins/touch.js b/dist/mixins/touch.js index 5efa9dda..7566cb3b 100644 --- a/dist/mixins/touch.js +++ b/dist/mixins/touch.js @@ -1,13 +1,14 @@ export const touch = Behavior({ methods: { touchStart(event) { + const touch = event.touches[0]; this.direction = ''; this.deltaX = 0; this.deltaY = 0; this.offsetX = 0; this.offsetY = 0; - this.startX = event.touches[0].clientX; - this.startY = event.touches[0].clientY; + this.startX = touch.clientX; + this.startY = touch.clientY; }, touchMove(event) { const touch = event.touches[0]; @@ -15,7 +16,12 @@ export const touch = Behavior({ this.deltaY = touch.clientY - this.startY; this.offsetX = Math.abs(this.deltaX); this.offsetY = Math.abs(this.deltaY); - this.direction = this.offsetX > this.offsetY ? 'horizontal' : this.offsetX < this.offsetY ? 'vertical' : ''; + this.direction = + this.offsetX > this.offsetY + ? 'horizontal' + : this.offsetX < this.offsetY + ? 'vertical' + : ''; } } }); diff --git a/dist/swipe-cell/index.js b/dist/swipe-cell/index.js index c81a4cbe..2e5f53bb 100644 --- a/dist/swipe-cell/index.js +++ b/dist/swipe-cell/index.js @@ -1,6 +1,6 @@ import { VantComponent } from '../common/component'; import { touch } from '../mixins/touch'; -const THRESHOLD = 0.15; +const THRESHOLD = 0.3; VantComponent({ props: { disabled: Boolean, @@ -16,97 +16,89 @@ VantComponent({ }, mixins: [touch], data: { - offset: 0, - draging: false + catchMove: true }, - computed: { - wrapperStyle() { - const { offset, draging } = this.data; - const transform = `translate3d(${offset}px, 0, 0)`; - const transition = draging ? 'none' : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)'; - return ` - -webkit-transform: ${transform}; - -webkit-transition: ${transition}; - transform: ${transform}; - transition: ${transition}; - `; - } + created() { + this.offset = 0; }, methods: { - onTransitionend() { - this.swipe = false; - }, open(position) { const { leftWidth, rightWidth } = this.data; const offset = position === 'left' ? leftWidth : -rightWidth; this.swipeMove(offset); - this.resetSwipeStatus(); }, close() { - this.set({ offset: 0 }); - }, - resetSwipeStatus() { - this.swiping = false; - this.opened = true; + this.swipeMove(0); }, swipeMove(offset = 0) { - this.set({ offset }); - offset && (this.swiping = true); - !offset && (this.opened = false); + this.offset = offset; + const transform = `translate3d(${offset}px, 0, 0)`; + const transition = this.draging + ? 'none' + : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)'; + this.set({ + wrapperStyle: ` + -webkit-transform: ${transform}; + -webkit-transition: ${transition}; + transform: ${transform}; + transition: ${transition}; + ` + }); }, - swipeLeaveTransition(direction) { - const { offset, leftWidth, rightWidth } = this.data; - const threshold = this.opened ? 1 - THRESHOLD : THRESHOLD; - // right - if (direction > 0 && -offset > rightWidth * threshold && rightWidth > 0) { + swipeLeaveTransition() { + const { leftWidth, rightWidth } = this.data; + const { offset } = this; + if (rightWidth > 0 && -offset > rightWidth * THRESHOLD) { this.open('right'); - // left } - else if (direction < 0 && offset > leftWidth * threshold && leftWidth > 0) { + else if (leftWidth > 0 && offset > leftWidth * THRESHOLD) { this.open('left'); } else { - this.swipeMove(); + this.swipeMove(0); } }, startDrag(event) { if (this.data.disabled) { return; } - this.set({ draging: true }); + this.draging = true; + this.startOffset = this.offset; + this.firstDirection = ''; this.touchStart(event); - if (this.opened) { - this.startX -= this.data.offset; - } }, + noop() { }, onDrag(event) { if (this.data.disabled) { return; } this.touchMove(event); - const { deltaX } = this; - const { leftWidth, rightWidth } = this.data; - if ((deltaX < 0 && (-deltaX > rightWidth || !rightWidth)) || - (deltaX > 0 && (deltaX > leftWidth || (deltaX > 0 && !leftWidth)))) { + if (!this.firstDirection) { + this.firstDirection = this.direction; + this.set({ catchMove: this.firstDirection === 'horizontal' }); + } + if (this.firstDirection === 'vertical') { return; } - if (this.direction === 'horizontal') { - this.swipeMove(deltaX); + const { leftWidth, rightWidth } = this.data; + const offset = this.startOffset + this.deltaX; + if ((rightWidth > 0 && -offset > rightWidth) || + (leftWidth > 0 && offset > leftWidth)) { + return; } + this.swipeMove(offset); }, endDrag() { if (this.data.disabled) { return; } - this.set({ draging: false }); - if (this.swiping) { - this.swipeLeaveTransition(this.data.offset > 0 ? -1 : 1); - } + this.draging = false; + this.swipeLeaveTransition(); }, onClick(event) { const { key: position = 'outside' } = event.currentTarget.dataset; this.$emit('click', position); - if (!this.data.offset) { + if (!this.offset) { return; } if (this.data.asyncClose) { diff --git a/dist/swipe-cell/index.wxml b/dist/swipe-cell/index.wxml index 35bfef93..0ce1e47c 100644 --- a/dist/swipe-cell/index.wxml +++ b/dist/swipe-cell/index.wxml @@ -3,14 +3,12 @@ data-key="cell" catchtap="onClick" bindtouchstart="startDrag" - catchtouchmove="onDrag" + catchtouchmove="{{ catchMove ? 'noop' : '' }}" + capture-bind:touchmove="onDrag" catchtouchend="endDrag" catchtouchcancel="endDrag" > - + diff --git a/lib/collapse-item/index.js b/lib/collapse-item/index.js index 3d200cca..b0d1a094 100644 --- a/lib/collapse-item/index.js +++ b/lib/collapse-item/index.js @@ -1,6 +1,7 @@ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var component_1 = require("../common/component"); +var nextTick = function () { return new Promise(function (resolve) { return setTimeout(resolve, 20); }); }; component_1.VantComponent({ classes: ['title-class', 'content-class'], relation: { @@ -28,49 +29,51 @@ component_1.VantComponent({ }, data: { contentHeight: 0, - expanded: false + expanded: false, + transition: false }, - beforeCreate: function () { - this.animation = wx.createAnimation({ - duration: 300, - timingFunction: 'ease-in-out' + mounted: function () { + var _this = this; + this.updateExpanded() + .then(nextTick) + .then(function () { + _this.set({ transition: true }); }); }, methods: { updateExpanded: function () { if (!this.parent) { - return null; + return Promise.resolve(); } - var _a = this.parent.data, value = _a.value, accordion = _a.accordion, items = _a.items; + var _a = this.parent.data, value = _a.value, accordion = _a.accordion; + var _b = this.parent.children, children = _b === void 0 ? [] : _b; var name = this.data.name; - var index = items.indexOf(this); + var index = children.indexOf(this); var currentName = name == null ? index : name; var expanded = accordion ? value === currentName - : value.some(function (name) { return name === currentName; }); + : (value || []).some(function (name) { return name === currentName; }); + var stack = []; if (expanded !== this.data.expanded) { - this.updateStyle(expanded); + stack.push(this.updateStyle(expanded)); } - this.set({ index: index, expanded: expanded }); + stack.push(this.set({ index: index, expanded: expanded })); + return Promise.all(stack); }, updateStyle: function (expanded) { var _this = this; - this.getRect('.van-collapse-item__content').then(function (res) { - var animationData = _this.animation - .height(expanded ? res.height : 0) - .step() - .export(); + return this.getRect('.van-collapse-item__content') + .then(function (rect) { return rect.height; }) + .then(function (height) { if (expanded) { - _this.set({ animationData: animationData }); + return _this.set({ + contentHeight: height ? height + "px" : 'auto' + }); } else { - _this.set({ - contentHeight: res.height + 'px' - }, function () { - setTimeout(function () { - _this.set({ animationData: animationData }); - }, 20); - }); + return _this.set({ contentHeight: height + "px" }) + .then(nextTick) + .then(function () { return _this.set({ contentHeight: 0 }); }); } }); }, @@ -79,7 +82,7 @@ component_1.VantComponent({ return; } var _a = this.data, name = _a.name, expanded = _a.expanded; - var index = this.parent.data.items.indexOf(this); + var index = this.parent.children.indexOf(this); var currentName = name == null ? index : name; this.parent.switch(currentName, !expanded); }, diff --git a/lib/collapse-item/index.wxml b/lib/collapse-item/index.wxml index b39e4cea..a3fe5a8f 100644 --- a/lib/collapse-item/index.wxml +++ b/lib/collapse-item/index.wxml @@ -30,9 +30,8 @@ /> this.offsetY ? 'horizontal' : this.offsetX < this.offsetY ? 'vertical' : ''; + this.direction = + this.offsetX > this.offsetY + ? 'horizontal' + : this.offsetX < this.offsetY + ? 'vertical' + : ''; } } }); diff --git a/lib/swipe-cell/index.js b/lib/swipe-cell/index.js index 806bc0f4..0d0010cf 100644 --- a/lib/swipe-cell/index.js +++ b/lib/swipe-cell/index.js @@ -2,7 +2,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); var component_1 = require("../common/component"); var touch_1 = require("../mixins/touch"); -var THRESHOLD = 0.15; +var THRESHOLD = 0.3; component_1.VantComponent({ props: { disabled: Boolean, @@ -18,93 +18,85 @@ component_1.VantComponent({ }, mixins: [touch_1.touch], data: { - offset: 0, - draging: false + catchMove: true }, - computed: { - wrapperStyle: function () { - var _a = this.data, offset = _a.offset, draging = _a.draging; - var transform = "translate3d(" + offset + "px, 0, 0)"; - var transition = draging ? 'none' : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)'; - return "\n -webkit-transform: " + transform + ";\n -webkit-transition: " + transition + ";\n transform: " + transform + ";\n transition: " + transition + ";\n "; - } + created: function () { + this.offset = 0; }, methods: { - onTransitionend: function () { - this.swipe = false; - }, open: function (position) { var _a = this.data, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth; var offset = position === 'left' ? leftWidth : -rightWidth; this.swipeMove(offset); - this.resetSwipeStatus(); }, close: function () { - this.set({ offset: 0 }); - }, - resetSwipeStatus: function () { - this.swiping = false; - this.opened = true; + this.swipeMove(0); }, swipeMove: function (offset) { if (offset === void 0) { offset = 0; } - this.set({ offset: offset }); - offset && (this.swiping = true); - !offset && (this.opened = false); + this.offset = offset; + var transform = "translate3d(" + offset + "px, 0, 0)"; + var transition = this.draging + ? 'none' + : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)'; + this.set({ + wrapperStyle: "\n -webkit-transform: " + transform + ";\n -webkit-transition: " + transition + ";\n transform: " + transform + ";\n transition: " + transition + ";\n " + }); }, - swipeLeaveTransition: function (direction) { - var _a = this.data, offset = _a.offset, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth; - var threshold = this.opened ? 1 - THRESHOLD : THRESHOLD; - // right - if (direction > 0 && -offset > rightWidth * threshold && rightWidth > 0) { + swipeLeaveTransition: function () { + var _a = this.data, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth; + var offset = this.offset; + if (rightWidth > 0 && -offset > rightWidth * THRESHOLD) { this.open('right'); - // left } - else if (direction < 0 && offset > leftWidth * threshold && leftWidth > 0) { + else if (leftWidth > 0 && offset > leftWidth * THRESHOLD) { this.open('left'); } else { - this.swipeMove(); + this.swipeMove(0); } }, startDrag: function (event) { if (this.data.disabled) { return; } - this.set({ draging: true }); + this.draging = true; + this.startOffset = this.offset; + this.firstDirection = ''; this.touchStart(event); - if (this.opened) { - this.startX -= this.data.offset; - } }, + noop: function () { }, onDrag: function (event) { if (this.data.disabled) { return; } this.touchMove(event); - var deltaX = this.deltaX; - var _a = this.data, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth; - if ((deltaX < 0 && (-deltaX > rightWidth || !rightWidth)) || - (deltaX > 0 && (deltaX > leftWidth || (deltaX > 0 && !leftWidth)))) { + if (!this.firstDirection) { + this.firstDirection = this.direction; + this.set({ catchMove: this.firstDirection === 'horizontal' }); + } + if (this.firstDirection === 'vertical') { return; } - if (this.direction === 'horizontal') { - this.swipeMove(deltaX); + var _a = this.data, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth; + var offset = this.startOffset + this.deltaX; + if ((rightWidth > 0 && -offset > rightWidth) || + (leftWidth > 0 && offset > leftWidth)) { + return; } + this.swipeMove(offset); }, endDrag: function () { if (this.data.disabled) { return; } - this.set({ draging: false }); - if (this.swiping) { - this.swipeLeaveTransition(this.data.offset > 0 ? -1 : 1); - } + this.draging = false; + this.swipeLeaveTransition(); }, onClick: function (event) { var _a = event.currentTarget.dataset.key, position = _a === void 0 ? 'outside' : _a; this.$emit('click', position); - if (!this.data.offset) { + if (!this.offset) { return; } if (this.data.asyncClose) { diff --git a/lib/swipe-cell/index.wxml b/lib/swipe-cell/index.wxml index 35bfef93..0ce1e47c 100644 --- a/lib/swipe-cell/index.wxml +++ b/lib/swipe-cell/index.wxml @@ -3,14 +3,12 @@ data-key="cell" catchtap="onClick" bindtouchstart="startDrag" - catchtouchmove="onDrag" + catchtouchmove="{{ catchMove ? 'noop' : '' }}" + capture-bind:touchmove="onDrag" catchtouchend="endDrag" catchtouchcancel="endDrag" > - +