blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

[build] 0.5.10

Browse Source
This commit is contained in:
rex-zsd 2019-04-11 16:56:38 +08:00
parent bbb070f084
commit c9b52c0aab
14 changed files with 194 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
dist/collapse-item/index.js vendored
View File

@ -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);
},

3
dist/collapse-item/index.wxml vendored
View File

@ -30,9 +30,8 @@
/>
</van-cell>
<view
class="van-collapse-item__wrapper"
class="{{ utils.bem('collapse-item__wrapper', { transition }) }}"
style="height: {{ contentHeight }};"
animation="{{ animationData }}"
bind:transitionend="onTransitionEnd"
>
<view

2
dist/collapse-item/index.wxss vendored
View File

@ -1 +1 @@
@import '../common/index.wxss';.van-collapse-item__title .van-cell__right-icon{-webkit-transform:rotate(90deg);transform:rotate(90deg);transition:.3s}.van-collapse-item__title--expanded .van-cell__right-icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.van-collapse-item__title--disabled .van-cell,.van-collapse-item__title--disabled .van-cell__right-icon{color:#c9c9c9!important}.van-collapse-item__title--disabled .van-cell--hover{background-color:#fff!important}.van-collapse-item__wrapper{overflow:hidden}.van-collapse-item__content{padding:15px;font-size:13px;line-height:1.5;color:#999;background-color:#fff}
@import '../common/index.wxss';.van-collapse-item__title .van-cell__right-icon{-webkit-transform:rotate(90deg);transform:rotate(90deg);transition:.3s}.van-collapse-item__title--expanded .van-cell__right-icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.van-collapse-item__title--disabled .van-cell,.van-collapse-item__title--disabled .van-cell__right-icon{color:#c9c9c9!important}.van-collapse-item__title--disabled .van-cell--hover{background-color:#fff!important}.van-collapse-item__wrapper{overflow:hidden}.van-collapse-item__wrapper--transition{transition:height .3s ease-in-out}.van-collapse-item__content{padding:15px;font-size:13px;line-height:1.5;color:#999;background-color:#fff}

37
dist/collapse/index.js vendored
View File

@ -4,43 +4,38 @@ VantComponent({
name: 'collapse-item',
type: 'descendant',
linked(child) {
this.set({
items: [...this.data.items, child]
}, () => {
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 : '';

12
dist/mixins/touch.js vendored
View File

@ -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'
: '';
}
}
});

92
dist/swipe-cell/index.js vendored
View File

@ -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) {

8
dist/swipe-cell/index.wxml vendored
View File

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

53
lib/collapse-item/index.js
View File

@ -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);
},

3
lib/collapse-item/index.wxml
View File

@ -30,9 +30,8 @@
/>
</van-cell>
<view
class="van-collapse-item__wrapper"
class="{{ utils.bem('collapse-item__wrapper', { transition }) }}"
style="height: {{ contentHeight }};"
animation="{{ animationData }}"
bind:transitionend="onTransitionEnd"
>
<view

2
lib/collapse-item/index.wxss
View File

@ -1 +1 @@
@import '../common/index.wxss';.van-collapse-item__title .van-cell__right-icon{-webkit-transform:rotate(90deg);transform:rotate(90deg);transition:.3s}.van-collapse-item__title--expanded .van-cell__right-icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.van-collapse-item__title--disabled .van-cell,.van-collapse-item__title--disabled .van-cell__right-icon{color:#c9c9c9!important}.van-collapse-item__title--disabled .van-cell--hover{background-color:#fff!important}.van-collapse-item__wrapper{overflow:hidden}.van-collapse-item__content{padding:15px;font-size:13px;line-height:1.5;color:#999;background-color:#fff}
@import '../common/index.wxss';.van-collapse-item__title .van-cell__right-icon{-webkit-transform:rotate(90deg);transform:rotate(90deg);transition:.3s}.van-collapse-item__title--expanded .van-cell__right-icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.van-collapse-item__title--disabled .van-cell,.van-collapse-item__title--disabled .van-cell__right-icon{color:#c9c9c9!important}.van-collapse-item__title--disabled .van-cell--hover{background-color:#fff!important}.van-collapse-item__wrapper{overflow:hidden}.van-collapse-item__wrapper--transition{transition:height .3s ease-in-out}.van-collapse-item__content{padding:15px;font-size:13px;line-height:1.5;color:#999;background-color:#fff}

37
lib/collapse/index.js
View File

@ -6,43 +6,38 @@ component_1.VantComponent({
name: 'collapse-item',
type: 'descendant',
linked: function (child) {
this.set({
items: this.data.items.concat([child])
}, function () {
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: function () {
this.children = [];
},
watch: {
value: function () {
this.data.items.forEach(function (child) {
methods: {
updateExpanded: function () {
this.children.forEach(function (child) {
child.updateExpanded();
});
},
accordion: function () {
this.data.items.forEach(function (child) {
child.updateExpanded();
});
}
},
methods: {
switch: function (name, expanded) {
var _a = this.data, accordion = _a.accordion, value = _a.value;
if (!accordion) {
name = expanded
? value.concat(name)
: value.filter(function (activeName) { return activeName !== name; });
? (value || []).concat(name)
: (value || []).filter(function (activeName) { return activeName !== name; });
}
else {
name = expanded ? name : '';

12
lib/mixins/touch.js
View File

@ -3,13 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
exports.touch = Behavior({
methods: {
touchStart: function (event) {
var 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: function (event) {
var touch = event.touches[0];
@ -17,7 +18,12 @@ exports.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'
: '';
}
}
});

82
lib/swipe-cell/index.js
View File

@ -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) {

8
lib/swipe-cell/index.wxml
View File

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