-
-
- {{ tab.title }}
-
+
-
-
-
- {{ tab.title }}
-
-
@@ -41,192 +25,126 @@
diff --git a/packages/tabs/swipe.js b/packages/tabs/swipe.js
deleted file mode 100644
index 5b22acdf4..000000000
--- a/packages/tabs/swipe.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import Vue from 'vue';
-
-let isSwiping = false;
-
-const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
-
-export default function(element, options) {
- const moveFn = function(event) {
- if (options.drag) {
- options.drag(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
- }
- };
-
- const endFn = function(event) {
- if (!supportTouch) {
- document.removeEventListener('mousemove', moveFn);
- document.removeEventListener('mouseup', endFn);
- }
-
- isSwiping = false;
-
- if (options.end) {
- options.end(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
- }
- };
-
- element.addEventListener(supportTouch ? 'touchstart' : 'mousedown', function(event) {
- if (isSwiping) return;
-
- if (!supportTouch) {
- document.addEventListener('mousemove', moveFn);
- document.addEventListener('mouseup', endFn);
- }
- isSwiping = true;
-
- if (options.start) {
- options.start(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
- }
- });
-
- if (supportTouch) {
- element.addEventListener('touchmove', moveFn);
- element.addEventListener('touchend', endFn);
- element.addEventListener('touchcancel', endFn);
- }
-};
diff --git a/packages/utils/raf.js b/packages/utils/raf.js
new file mode 100644
index 000000000..a67176870
--- /dev/null
+++ b/packages/utils/raf.js
@@ -0,0 +1,32 @@
+/**
+ * requestAnimationFrame polyfill
+ */
+
+import { isServer } from './index';
+
+let prev = Date.now();
+function fallback(fn) {
+ const curr = Date.now();
+ const ms = Math.max(0, 16 - (curr - prev));
+ const id = setTimeout(fn, ms);
+ prev = curr + ms;
+ return id;
+}
+
+const global = isServer ? global : window;
+const iRaf =
+ global.requestAnimationFrame ||
+ global.webkitRequestAnimationFrame ||
+ fallback;
+const iCancel =
+ global.cancelAnimationFrame ||
+ global.webkitCancelAnimationFrame ||
+ global.clearTimeout;
+
+export function raf(fn) {
+ return iRaf.call(global, fn);
+}
+
+export function cancel(id) {
+ iCancel.call(global, id);
+}
diff --git a/packages/utils/transition.js b/packages/utils/transition.js
deleted file mode 100644
index b6ef73642..000000000
--- a/packages/utils/transition.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import Vue from 'vue';
-
-var exportObj = {};
-
-if (!Vue.prototype.$isServer) {
- var cssPrefix = '-webkit-';
- var vendorPrefix = 'Webkit';
- var transformProperty = vendorPrefix + 'Transform';
- var transformStyleName = cssPrefix + 'transform';
- var transitionProperty = vendorPrefix + 'Transition';
- var transitionStyleName = cssPrefix + 'transition';
- var transitionEndProperty = vendorPrefix.toLowerCase() + 'TransitionEnd';
-
- var getTranslate = function(element) {
- var result = { left: 0, top: 0 };
- if (element === null || element.style === null) return result;
-
- var transform = element.style[transformProperty];
- var matches = /translate\(\s*(-?\d+(\.?\d+?)?)px,\s*(-?\d+(\.\d+)?)px\)\s*translateZ\(0px\)/ig.exec(transform);
- if (matches) {
- result.left = +matches[1];
- result.top = +matches[3];
- }
-
- return result;
- };
-
- var translateElement = function(element, x, y) {
- if (x === null && y === null) return;
-
- if (element === null || element === undefined || element.style === null) return;
-
- if (!element.style[transformProperty] && x === 0 && y === 0) return;
-
- if (x === null || y === null) {
- var translate = getTranslate(element);
- if (x === null) {
- x = translate.left;
- }
- if (y === null) {
- y = translate.top;
- }
- }
-
- cancelTranslateElement(element);
- element.style[transformProperty] += ' translate(' + (x ? (x + 'px') : '0px') + ',' + (y ? (y + 'px') : '0px') + ') translateZ(0px)';
- };
-
- var cancelTranslateElement = function(element) {
- if (element === null || element.style === null) return;
-
- var transformValue = element.style[transformProperty];
-
- if (transformValue) {
- transformValue = transformValue.replace(/translate\(\s*(-?\d+(\.?\d+?)?)px,\s*(-?\d+(\.\d+)?)px\)\s*translateZ\(0px\)/g, '');
- element.style[transformProperty] = transformValue;
- }
- };
-
- exportObj = {
- transformProperty: transformProperty,
- transformStyleName: transformStyleName,
- transitionProperty: transitionProperty,
- transitionStyleName: transitionStyleName,
- transitionEndProperty: transitionEndProperty,
- getElementTranslate: getTranslate,
- translateElement: translateElement,
- cancelTranslateElement: cancelTranslateElement
- };
-};
-
-export default exportObj;
-
diff --git a/packages/vant-css/src/tab.css b/packages/vant-css/src/tab.css
index 34e58dce8..c5b9a8314 100644
--- a/packages/vant-css/src/tab.css
+++ b/packages/vant-css/src/tab.css
@@ -4,46 +4,38 @@
.van-tabs {
position: relative;
- &__nav-wrap {
- overflow: hidden;
- }
-
&__swipe {
user-select: none;
- transition: transform linear .2s;
.van-tab {
flex: 0 0 22%;
}
.van-tabs__nav {
- overflow: visible;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+
+ &::-webkit-scrollbar {
+ display: none;
+ background-color: transparent;
+ }
}
}
&__nav {
- overflow: hidden;
- transition: transform .5s cubic-bezier(.645, .045, .355, 1);
- position: relative;
display: flex;
+ position: relative;
+ background-color: $white;
&--line {
height: 44px;
-
- .van-tab {
- &::after {
- border-width: 1px 0;
- }
- }
}
&--card {
height: 28px;
margin: 0 15px;
- background-color: $white;
border-radius: 2px;
border: 1px solid $gray-darker;
- overflow: hidden;
.van-tab {
color: $gray-darker;
@@ -55,8 +47,8 @@
}
&.van-tab--active {
- background-color: $gray-darker;
color: $white;
+ background-color: $gray-darker;
}
}
}
@@ -64,27 +56,25 @@
&__nav-bar {
z-index: 1;
- position: absolute;
left: 0;
bottom: 0;
height: 2px;
- background-color: #f13e3a;
- transition: transform .3s cubic-bezier(.645, .045, .355, 1);
- transform-origin: 0 0;
+ position: absolute;
+ background-color: $red;
}
}
.van-tab {
+ flex: 1;
+ cursor: pointer;
+ padding: 0 5px;
+ font-size: 14px;
position: relative;
color: $text-color;
- background-color: $white;
- font-size: 14px;
line-height: 44px;
- box-sizing: border-box;
- cursor: pointer;
text-align: center;
- flex: 1;
- padding: 0 5px;
+ box-sizing: border-box;
+ background-color: $white;
min-width: 0; /* hack for flex ellipsis */
span {
@@ -92,10 +82,22 @@
@mixin ellipsis;
}
+ &:active {
+ background-color: $active-color;
+ }
+
&--active {
color: $red;
}
+ &--disabled {
+ color: $gray;
+
+ &:active {
+ background-color: $white;
+ }
+ }
+
&__pane {
display: none;
+ 