From afae7b3c5dda1c66108fbdd7e731cddac3f52430 Mon Sep 17 00:00:00 2001 From: zhongnan Date: Wed, 12 Aug 2020 16:46:28 +0800 Subject: [PATCH] build: compile 1.4.4 --- dist/common/utils.d.ts | 3 ++ dist/common/utils.js | 47 ++++++++++++++++++---------- dist/info/index.wxss | 2 +- dist/mixins/transition.js | 63 +++++++++++++++---------------------- dist/tabs/index.js | 8 +++-- dist/tabs/index.wxml | 2 +- lib/common/utils.js | 16 +++++++++- lib/info/index.wxss | 2 +- lib/mixins/transition.js | 65 +++++++++++++++------------------------ lib/tabs/index.js | 11 +++++-- lib/tabs/index.wxml | 2 +- 11 files changed, 116 insertions(+), 105 deletions(-) diff --git a/dist/common/utils.d.ts b/dist/common/utils.d.ts index 411e4aa9..2bff69f9 100644 --- a/dist/common/utils.d.ts +++ b/dist/common/utils.d.ts @@ -6,3 +6,6 @@ export declare function range(num: number, min: number, max: number): number; export declare function nextTick(fn: Function): void; export declare function getSystemInfoSync(): WechatMiniprogram.GetSystemInfoSyncResult; export declare function addUnit(value?: string | number): string | undefined; +export declare function requestAnimationFrame( + cb: Function +): void | WechatMiniprogram.NodesRef; diff --git a/dist/common/utils.js b/dist/common/utils.js index cc0f8f11..30edc486 100644 --- a/dist/common/utils.js +++ b/dist/common/utils.js @@ -1,32 +1,45 @@ export function isDef(value) { - return value !== undefined && value !== null; + return value !== undefined && value !== null; } export function isObj(x) { - const type = typeof x; - return x !== null && (type === 'object' || type === 'function'); + const type = typeof x; + return x !== null && (type === 'object' || type === 'function'); } export function isNumber(value) { - return /^\d+(\.\d+)?$/.test(value); + return /^\d+(\.\d+)?$/.test(value); } export function range(num, min, max) { - return Math.min(Math.max(num, min), max); + return Math.min(Math.max(num, min), max); } export function nextTick(fn) { - setTimeout(() => { - fn(); - }, 1000 / 30); + setTimeout(() => { + fn(); + }, 1000 / 30); } let systemInfo = null; export function getSystemInfoSync() { - if (systemInfo == null) { - systemInfo = wx.getSystemInfoSync(); - } - return systemInfo; + if (systemInfo == null) { + systemInfo = wx.getSystemInfoSync(); + } + return systemInfo; } export function addUnit(value) { - if (!isDef(value)) { - return undefined; - } - value = String(value); - return isNumber(value) ? `${value}px` : value; + if (!isDef(value)) { + return undefined; + } + value = String(value); + return isNumber(value) ? `${value}px` : value; +} +export function requestAnimationFrame(cb) { + const systemInfo = getSystemInfoSync(); + if (systemInfo.platform === 'devtools') { + return nextTick(cb); + } + return wx + .createSelectorQuery() + .selectViewport() + .boundingClientRect() + .exec(() => { + cb(); + }); } diff --git a/dist/info/index.wxss b/dist/info/index.wxss index fed172ad..62801214 100644 --- a/dist/info/index.wxss +++ b/dist/info/index.wxss @@ -1 +1 @@ -@import '../common/index.wxss';.van-info{position:absolute;top:0;right:0;box-sizing:border-box;white-space:nowrap;text-align:center;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);-webkit-transform-origin:100%;transform-origin:100%;min-width:16px;min-width:var(--info-size,16px);padding:0 3px;padding:var(--info-padding,0 3px);color:#fff;color:var(--info-color,#fff);font-weight:500;font-weight:var(--info-font-weight,500);font-size:12px;font-size:var(--info-font-size,12px);line-height:14px;line-height:calc(var(--info-size, 16px) - var(--info-border-width, 1px)*2);background-color:#ee0a24;background-color:var(--info-background-color,#ee0a24);border:1px solid #fff;border:var(--info-border-width,1px) solid var(--white,#fff);border-radius:16px;border-radius:var(--info-size,16px)}.van-info--dot{min-width:0;border-radius:100%;width:8px;width:var(--info-dot-size,8px);height:8px;height:var(--info-dot-size,8px);background-color:#ee0a24;background-color:var(--info-dot-color,#ee0a24)} \ No newline at end of file +@import '../common/index.wxss';.van-info{position:absolute;top:0;right:0;box-sizing:border-box;line-height:1.2;white-space:nowrap;text-align:center;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);-webkit-transform-origin:100%;transform-origin:100%;min-width:16px;min-width:var(--info-size,16px);padding:0 3px;padding:var(--info-padding,0 3px);color:#fff;color:var(--info-color,#fff);font-weight:500;font-weight:var(--info-font-weight,500);font-size:12px;font-size:var(--info-font-size,12px);font-family:-apple-system-font,Helvetica Neue,Arial,sans-serif;font-family:var(--info-font-family,-apple-system-font,Helvetica Neue,Arial,sans-serif);background-color:#ee0a24;background-color:var(--info-background-color,#ee0a24);border:1px solid #fff;border:var(--info-border-width,1px) solid var(--white,#fff);border-radius:16px;border-radius:var(--info-size,16px)}.van-info--dot{min-width:0;border-radius:100%;width:8px;width:var(--info-dot-size,8px);height:8px;height:var(--info-dot-size,8px);background-color:#ee0a24;background-color:var(--info-dot-color,#ee0a24)} \ No newline at end of file diff --git a/dist/mixins/transition.js b/dist/mixins/transition.js index 0285058b..675028bc 100644 --- a/dist/mixins/transition.js +++ b/dist/mixins/transition.js @@ -1,11 +1,10 @@ -import { isObj } from '../common/utils'; +import { isObj, requestAnimationFrame } from '../common/utils'; const getClassNames = (name) => ({ enter: `van-${name}-enter van-${name}-enter-active enter-class enter-active-class`, 'enter-to': `van-${name}-enter-to van-${name}-enter-active enter-to-class enter-active-class`, leave: `van-${name}-leave van-${name}-leave-active leave-class leave-active-class`, 'leave-to': `van-${name}-leave-to van-${name}-leave-active leave-to-class leave-active-class`, }); -const nextTick = () => new Promise((resolve) => setTimeout(resolve, 1000 / 30)); export const transition = function (showDefaultValue) { return Behavior({ properties: { @@ -45,27 +44,21 @@ export const transition = function (showDefaultValue) { const currentDuration = isObj(duration) ? duration.enter : duration; this.status = 'enter'; this.$emit('before-enter'); - Promise.resolve() - .then(nextTick) - .then(() => { - this.checkStatus('enter'); - this.$emit('enter'); - this.setData({ - inited: true, - display: true, - classes: classNames.enter, - currentDuration, - }); - }) - .then(nextTick) - .then(() => { + requestAnimationFrame(() => { + this.checkStatus('enter'); + this.$emit('enter'); + this.setData({ + inited: true, + display: true, + classes: classNames.enter, + currentDuration, + }); + requestAnimationFrame(() => { this.checkStatus('enter'); this.transitionEnded = false; - this.setData({ - classes: classNames['enter-to'], - }); - }) - .catch(() => {}); + this.setData({ classes: classNames['enter-to'] }); + }); + }); }, leave() { if (!this.data.display) { @@ -76,26 +69,20 @@ export const transition = function (showDefaultValue) { const currentDuration = isObj(duration) ? duration.leave : duration; this.status = 'leave'; this.$emit('before-leave'); - Promise.resolve() - .then(nextTick) - .then(() => { - this.checkStatus('leave'); - this.$emit('leave'); - this.setData({ - classes: classNames.leave, - currentDuration, - }); - }) - .then(nextTick) - .then(() => { + requestAnimationFrame(() => { + this.checkStatus('leave'); + this.$emit('leave'); + this.setData({ + classes: classNames.leave, + currentDuration, + }); + requestAnimationFrame(() => { this.checkStatus('leave'); this.transitionEnded = false; setTimeout(() => this.onTransitionEnd(), currentDuration); - this.setData({ - classes: classNames['leave-to'], - }); - }) - .catch(() => {}); + this.setData({ classes: classNames['leave-to'] }); + }); + }); }, checkStatus(status) { if (status !== this.status) { diff --git a/dist/tabs/index.js b/dist/tabs/index.js index 9ad6609f..309abca9 100644 --- a/dist/tabs/index.js +++ b/dist/tabs/index.js @@ -205,7 +205,8 @@ VantComponent({ lineWidth, lineHeight, } = this.data; - this.getRect(`.van-tab--${currentIndex}`).then((rect) => { + this.getRect('.van-tab', true).then((rects = []) => { + const rect = rects[currentIndex]; if (rect == null) { return; } @@ -216,7 +217,10 @@ VantComponent({ lineHeight )};` : ''; - const left = rect.left + (rect.width - width) / 2; + let left = rects + .slice(0, currentIndex) + .reduce((prev, curr) => prev + curr.width, 0); + left += (rect.width - width) / 2; const transition = skipTransition ? '' : `transition-duration: ${duration}s; -webkit-transition-duration: ${duration}s;`; diff --git a/dist/tabs/index.wxml b/dist/tabs/index.wxml index 753959d6..c8195ae2 100644 --- a/dist/tabs/index.wxml +++ b/dist/tabs/index.wxml @@ -25,7 +25,7 @@ wx:for="{{ tabs }}" wx:key="index" data-index="{{ index }}" - class="{{ getters.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', ['' + index, { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }]) }}" + class="{{ getters.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }) }}" style="{{ getters.tabStyle(index === currentIndex, ellipsis, color, type, item.disabled, titleActiveColor, titleInactiveColor, swipeThreshold, scrollable) }}" bind:tap="onTap" > diff --git a/lib/common/utils.js b/lib/common/utils.js index f8f07e8c..09707c27 100644 --- a/lib/common/utils.js +++ b/lib/common/utils.js @@ -1,6 +1,6 @@ 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); -exports.addUnit = exports.getSystemInfoSync = exports.nextTick = exports.range = exports.isNumber = exports.isObj = exports.isDef = void 0; +exports.requestAnimationFrame = exports.addUnit = exports.getSystemInfoSync = exports.nextTick = exports.range = exports.isNumber = exports.isObj = exports.isDef = void 0; function isDef(value) { return value !== undefined && value !== null; } @@ -40,3 +40,17 @@ function addUnit(value) { return isNumber(value) ? value + 'px' : value; } exports.addUnit = addUnit; +function requestAnimationFrame(cb) { + var systemInfo = getSystemInfoSync(); + if (systemInfo.platform === 'devtools') { + return nextTick(cb); + } + return wx + .createSelectorQuery() + .selectViewport() + .boundingClientRect() + .exec(function () { + cb(); + }); +} +exports.requestAnimationFrame = requestAnimationFrame; diff --git a/lib/info/index.wxss b/lib/info/index.wxss index fed172ad..62801214 100644 --- a/lib/info/index.wxss +++ b/lib/info/index.wxss @@ -1 +1 @@ -@import '../common/index.wxss';.van-info{position:absolute;top:0;right:0;box-sizing:border-box;white-space:nowrap;text-align:center;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);-webkit-transform-origin:100%;transform-origin:100%;min-width:16px;min-width:var(--info-size,16px);padding:0 3px;padding:var(--info-padding,0 3px);color:#fff;color:var(--info-color,#fff);font-weight:500;font-weight:var(--info-font-weight,500);font-size:12px;font-size:var(--info-font-size,12px);line-height:14px;line-height:calc(var(--info-size, 16px) - var(--info-border-width, 1px)*2);background-color:#ee0a24;background-color:var(--info-background-color,#ee0a24);border:1px solid #fff;border:var(--info-border-width,1px) solid var(--white,#fff);border-radius:16px;border-radius:var(--info-size,16px)}.van-info--dot{min-width:0;border-radius:100%;width:8px;width:var(--info-dot-size,8px);height:8px;height:var(--info-dot-size,8px);background-color:#ee0a24;background-color:var(--info-dot-color,#ee0a24)} \ No newline at end of file +@import '../common/index.wxss';.van-info{position:absolute;top:0;right:0;box-sizing:border-box;line-height:1.2;white-space:nowrap;text-align:center;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);-webkit-transform-origin:100%;transform-origin:100%;min-width:16px;min-width:var(--info-size,16px);padding:0 3px;padding:var(--info-padding,0 3px);color:#fff;color:var(--info-color,#fff);font-weight:500;font-weight:var(--info-font-weight,500);font-size:12px;font-size:var(--info-font-size,12px);font-family:-apple-system-font,Helvetica Neue,Arial,sans-serif;font-family:var(--info-font-family,-apple-system-font,Helvetica Neue,Arial,sans-serif);background-color:#ee0a24;background-color:var(--info-background-color,#ee0a24);border:1px solid #fff;border:var(--info-border-width,1px) solid var(--white,#fff);border-radius:16px;border-radius:var(--info-size,16px)}.van-info--dot{min-width:0;border-radius:100%;width:8px;width:var(--info-dot-size,8px);height:8px;height:var(--info-dot-size,8px);background-color:#ee0a24;background-color:var(--info-dot-color,#ee0a24)} \ No newline at end of file diff --git a/lib/mixins/transition.js b/lib/mixins/transition.js index 548a62ce..23beebcd 100644 --- a/lib/mixins/transition.js +++ b/lib/mixins/transition.js @@ -30,11 +30,6 @@ var getClassNames = function (name) { '-leave-active leave-to-class leave-active-class', }; }; -var nextTick = function () { - return new Promise(function (resolve) { - return setTimeout(resolve, 1000 / 30); - }); -}; exports.transition = function (showDefaultValue) { return Behavior({ properties: { @@ -79,27 +74,21 @@ exports.transition = function (showDefaultValue) { : duration; this.status = 'enter'; this.$emit('before-enter'); - Promise.resolve() - .then(nextTick) - .then(function () { - _this.checkStatus('enter'); - _this.$emit('enter'); - _this.setData({ - inited: true, - display: true, - classes: classNames.enter, - currentDuration: currentDuration, - }); - }) - .then(nextTick) - .then(function () { + utils_1.requestAnimationFrame(function () { + _this.checkStatus('enter'); + _this.$emit('enter'); + _this.setData({ + inited: true, + display: true, + classes: classNames.enter, + currentDuration: currentDuration, + }); + utils_1.requestAnimationFrame(function () { _this.checkStatus('enter'); _this.transitionEnded = false; - _this.setData({ - classes: classNames['enter-to'], - }); - }) - .catch(function () {}); + _this.setData({ classes: classNames['enter-to'] }); + }); + }); }, leave: function () { var _this = this; @@ -115,28 +104,22 @@ exports.transition = function (showDefaultValue) { : duration; this.status = 'leave'; this.$emit('before-leave'); - Promise.resolve() - .then(nextTick) - .then(function () { - _this.checkStatus('leave'); - _this.$emit('leave'); - _this.setData({ - classes: classNames.leave, - currentDuration: currentDuration, - }); - }) - .then(nextTick) - .then(function () { + utils_1.requestAnimationFrame(function () { + _this.checkStatus('leave'); + _this.$emit('leave'); + _this.setData({ + classes: classNames.leave, + currentDuration: currentDuration, + }); + utils_1.requestAnimationFrame(function () { _this.checkStatus('leave'); _this.transitionEnded = false; setTimeout(function () { return _this.onTransitionEnd(); }, currentDuration); - _this.setData({ - classes: classNames['leave-to'], - }); - }) - .catch(function () {}); + _this.setData({ classes: classNames['leave-to'] }); + }); + }); }, checkStatus: function (status) { if (status !== this.status) { diff --git a/lib/tabs/index.js b/lib/tabs/index.js index a1ecaa85..9681e8a4 100644 --- a/lib/tabs/index.js +++ b/lib/tabs/index.js @@ -223,7 +223,11 @@ component_1.VantComponent({ currentIndex = _a.currentIndex, lineWidth = _a.lineWidth, lineHeight = _a.lineHeight; - this.getRect('.van-tab--' + currentIndex).then(function (rect) { + this.getRect('.van-tab', true).then(function (rects) { + if (rects === void 0) { + rects = []; + } + var rect = rects[currentIndex]; if (rect == null) { return; } @@ -236,7 +240,10 @@ component_1.VantComponent({ utils_1.addUnit(lineHeight) + ';' : ''; - var left = rect.left + (rect.width - width) / 2; + var left = rects.slice(0, currentIndex).reduce(function (prev, curr) { + return prev + curr.width; + }, 0); + left += (rect.width - width) / 2; var transition = skipTransition ? '' : 'transition-duration: ' + diff --git a/lib/tabs/index.wxml b/lib/tabs/index.wxml index 753959d6..c8195ae2 100644 --- a/lib/tabs/index.wxml +++ b/lib/tabs/index.wxml @@ -25,7 +25,7 @@ wx:for="{{ tabs }}" wx:key="index" data-index="{{ index }}" - class="{{ getters.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', ['' + index, { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }]) }}" + class="{{ getters.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }) }}" style="{{ getters.tabStyle(index === currentIndex, ellipsis, color, type, item.disabled, titleActiveColor, titleInactiveColor, swipeThreshold, scrollable) }}" bind:tap="onTap" >