diff --git a/dist/button/index.wxss b/dist/button/index.wxss index dc123408..17fa85bd 100644 --- a/dist/button/index.wxss +++ b/dist/button/index.wxss @@ -1 +1 @@ -@import '../common/index.wxss';.van-button{position:relative;display:inline-block;height:44px;padding:0;font-size:16px;line-height:42px;text-align:center;-webkit-text-size-adjust:100%;vertical-align:middle;border-radius:2px;box-sizing:border-box;-webkit-appearance:none}.van-button::after{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:#000;border:inherit;border-color:#000;border-radius:inherit;content:' ';opacity:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.van-button--active::after{opacity:.15}.van-button--unclickable::after{display:none}.van-button--default{color:#333;background-color:#fff;border:1px solid #eee}.van-button--primary{color:#fff;background-color:#07c160;border:1px solid #07c160}.van-button--danger{color:#fff;background-color:#f44;border:1px solid #f44}.van-button--warning{color:#fff;background-color:#ff976a;border:1px solid #ff976a}.van-button--plain{background-color:#fff}.van-button--plain.van-button--primary{color:#07c160}.van-button--plain.van-button--danger{color:#f44}.van-button--plain.van-button--warning{color:#ff976a}.van-button--large{width:100%;height:50px;line-height:48px}.van-button--normal{padding:0 15px;font-size:14px}.van-button--small{height:30px;min-width:60px;padding:0 8px;font-size:12px;line-height:28px}.van-button--mini{display:inline-block;width:50px;height:22px;font-size:10px;line-height:20px}.van-button--mini+.van-button--mini{margin-left:5px}.van-button--block{display:block;width:100%}.van-button--round{border-radius:10em}.van-button--square{border-radius:0}.van-button--disabled{opacity:.5}.van-button__loading-text{margin-left:5px;display:inline-block;vertical-align:middle} \ No newline at end of file +@import '../common/index.wxss';.van-button{position:relative;display:inline-block;height:44px;padding:0;font-size:16px;line-height:42px;text-align:center;-webkit-text-size-adjust:100%;vertical-align:middle;border-radius:2px;box-sizing:border-box;-webkit-appearance:none}.van-button::after{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:#000;border:inherit;border-color:#000;border-radius:inherit;content:' ';opacity:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.van-button--active::after{opacity:.15}.van-button--unclickable::after{display:none}.van-button--default{color:#333;background-color:#fff;border:1px solid #eee}.van-button--primary{color:#fff;background-color:#07c160;border:1px solid #07c160}.van-button--info{color:#fff;background-color:#1989fa;border:1px solid #1989fa}.van-button--danger{color:#fff;background-color:#f44;border:1px solid #f44}.van-button--warning{color:#fff;background-color:#ff976a;border:1px solid #ff976a}.van-button--plain{background-color:#fff}.van-button--plain.van-button--primary{color:#07c160}.van-button--plain.van-button--info{color:#1989fa}.van-button--plain.van-button--danger{color:#f44}.van-button--plain.van-button--warning{color:#ff976a}.van-button--large{width:100%;height:50px;line-height:48px}.van-button--normal{padding:0 15px;font-size:14px}.van-button--small{height:30px;min-width:60px;padding:0 8px;font-size:12px;line-height:28px}.van-button--mini{display:inline-block;width:50px;height:22px;font-size:10px;line-height:20px}.van-button--mini+.van-button--mini{margin-left:5px}.van-button--block{display:block;width:100%}.van-button--round{border-radius:10em}.van-button--square{border-radius:0}.van-button--disabled{opacity:.5}.van-button__loading-text{margin-left:5px;display:inline-block;vertical-align:middle} \ No newline at end of file diff --git a/dist/mixins/transition.js b/dist/mixins/transition.js index 3723eb12..a3d9d180 100644 --- a/dist/mixins/transition.js +++ b/dist/mixins/transition.js @@ -1,3 +1,18 @@ +import { isObj } from '../common/utils'; + +var getClassNames = function getClassNames(name) { + return { + 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" + }; +}; + +var requestAnimationFrame = function requestAnimationFrame(cb) { + return setTimeout(cb, 1000 / 60); +}; + export var transition = function transition(showDefaultValue) { return Behavior({ properties: { @@ -8,60 +23,77 @@ export var transition = function transition(showDefaultValue) { observer: 'observeShow' }, duration: { - type: Number, - value: 300 + type: [Number, Object], + value: 300, + observer: 'observeDuration' + }, + name: { + type: String, + value: 'fade', + observer: 'updateClasses' } }, data: { type: '', inited: false, display: false, - supportAnimation: true + classNames: getClassNames('fade') }, attached: function attached() { if (this.data.show) { this.show(); } - - this.detectSupport(); }, methods: { - detectSupport: function detectSupport() { - var _this = this; - - wx.getSystemInfo({ - success: function success(info) { - if (info && info.system && info.system.indexOf('iOS 8') === 0) { - _this.set({ - supportAnimation: false - }); - } - } - }); - }, observeShow: function observeShow(value) { if (value) { this.show(); } else { - if (this.data.supportAnimation) { - this.set({ - type: 'leave' - }); - } else { - this.set({ - display: false - }); - } + this.leave(); } }, + updateClasses: function updateClasses(name) { + this.set({ + classNames: getClassNames(name) + }); + }, show: function show() { + var _this = this; + + var _this$data = this.data, + classNames = _this$data.classNames, + duration = _this$data.duration; this.set({ inited: true, display: true, - type: 'enter' + classes: classNames.enter, + currentDuration: isObj(duration) ? duration.enter : duration + }).then(function () { + requestAnimationFrame(function () { + _this.set({ + classes: classNames['enter-to'] + }); + }); }); }, - onAnimationEnd: function onAnimationEnd() { + leave: function leave() { + var _this2 = this; + + var _this$data2 = this.data, + classNames = _this$data2.classNames, + duration = _this$data2.duration; + this.set({ + classes: classNames.leave, + currentDuration: isObj(duration) ? duration.leave : duration + }).then(function () { + requestAnimationFrame(function () { + _this2.set({ + classes: classNames['leave-to'] + }); + }); + }); + }, + onTransitionEnd: function onTransitionEnd() { if (!this.data.show) { this.set({ display: false diff --git a/dist/notify/index.wxss b/dist/notify/index.wxss index a38d37a4..52e528f6 100644 --- a/dist/notify/index.wxss +++ b/dist/notify/index.wxss @@ -1 +1 @@ -@import '../common/index.wxss';.van-notify{z-index:110;position:fixed;top:0;width:100%;text-align:center;box-sizing:border-box;padding:6px 15px;font-size:14px;line-height:20px} \ No newline at end of file +@import '../common/index.wxss';.van-notify{position:fixed;top:0;z-index:110;width:100%;padding:6px 15px;font-size:14px;line-height:20px;text-align:center;word-break:break-all;box-sizing:border-box} \ No newline at end of file diff --git a/dist/overlay/index.js b/dist/overlay/index.js index 1b12e8ed..30176d7f 100644 --- a/dist/overlay/index.js +++ b/dist/overlay/index.js @@ -4,6 +4,10 @@ VantComponent({ show: Boolean, mask: Boolean, customStyle: String, + duration: { + type: [Number, Object], + value: 300 + }, zIndex: { type: Number, value: 1 diff --git a/dist/overlay/index.wxml b/dist/overlay/index.wxml index 630afac6..31d222e4 100644 --- a/dist/overlay/index.wxml +++ b/dist/overlay/index.wxml @@ -2,6 +2,7 @@ show="{{ show }}" custom-class="van-overlay" custom-style="z-index: {{ zIndex }}; {{ mask ? 'background-color: rgba(0, 0, 0, .7);' : '' }}; {{ customStyle }}" + duration="{{ duration }}" bind:tap="onClick" catch:touchmove="noop" /> diff --git a/dist/overlay/index.wxss b/dist/overlay/index.wxss index c982de0f..d4a466c9 100644 --- a/dist/overlay/index.wxss +++ b/dist/overlay/index.wxss @@ -1 +1 @@ -@import '../common/index.wxss';.van-overlay{position:fixed;top:0;left:0;right:0;bottom:0} \ No newline at end of file +@import '../common/index.wxss';.van-overlay{position:fixed;top:0;right:0;bottom:0;left:0} \ No newline at end of file diff --git a/dist/popup/index.js b/dist/popup/index.js index 46926c32..c37ffe35 100644 --- a/dist/popup/index.js +++ b/dist/popup/index.js @@ -2,9 +2,13 @@ import { VantComponent } from '../common/component'; import { transition } from '../mixins/transition'; import { iphonex } from '../mixins/iphonex'; VantComponent({ + classes: ['enter-class', 'enter-active-class', 'enter-to-class', 'leave-class', 'leave-active-class', 'leave-to-class'], mixins: [transition(false), iphonex], props: { - transition: String, + transition: { + type: String, + observer: 'observeClass' + }, customStyle: String, overlayStyle: String, zIndex: { @@ -21,9 +25,13 @@ VantComponent({ }, position: { type: String, - value: 'center' + value: 'center', + observer: 'observeClass' } }, + created: function created() { + this.observeClass(); + }, methods: { onClickOverlay: function onClickOverlay() { this.$emit('click-overlay'); @@ -31,6 +39,12 @@ VantComponent({ if (this.data.closeOnClickOverlay) { this.$emit('close'); } + }, + observeClass: function observeClass() { + var _this$data = this.data, + transition = _this$data.transition, + position = _this$data.position; + this.updateClasses(transition || position); } } }); \ No newline at end of file diff --git a/dist/popup/index.wxml b/dist/popup/index.wxml index bafbfecb..6d38e13b 100644 --- a/dist/popup/index.wxml +++ b/dist/popup/index.wxml @@ -6,13 +6,14 @@ show="{{ show }}" z-index="{{ zIndex }}" custom-style="{{ overlayStyle }}" + duration="{{ duration }}" bind:click="onClickOverlay" /> diff --git a/dist/popup/index.wxss b/dist/popup/index.wxss index 9413da11..3e3df103 100644 --- a/dist/popup/index.wxss +++ b/dist/popup/index.wxss @@ -1 +1 @@ -@import '../common/index.wxss';.van-popup{top:50%;left:50%;position:fixed;max-height:100%;overflow-y:auto;box-sizing:border-box;background-color:#fff;-webkit-overflow-scrolling:touch;-webkit-animation:ease both;animation:ease both}.van-popup--center{-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.van-popup--top{width:100%;top:0;right:auto;bottom:auto;left:50%}.van-popup--right{top:50%;right:0;bottom:auto;left:auto}.van-popup--bottom{width:100%;top:auto;bottom:0;right:auto;left:50%}.van-popup--left{top:50%;right:auto;bottom:auto;left:0}.van-popup--safe{padding-bottom:34px}@-webkit-keyframes van-center-enter{from{opacity:0}}@keyframes van-center-enter{from{opacity:0}}@-webkit-keyframes van-center-leave{to{opacity:0}}@keyframes van-center-leave{to{opacity:0}}@-webkit-keyframes van-scale-enter{from{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}}@keyframes van-scale-enter{from{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}}@-webkit-keyframes van-scale-leave{to{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}}@keyframes van-scale-leave{to{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}}@-webkit-keyframes van-bottom-enter{from{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@keyframes van-bottom-enter{from{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@-webkit-keyframes van-bottom-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}}@keyframes van-bottom-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}}@-webkit-keyframes van-top-enter{from{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@keyframes van-top-enter{from{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@-webkit-keyframes van-top-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}}@keyframes van-top-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}}@-webkit-keyframes van-left-enter{from{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@keyframes van-left-enter{from{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@-webkit-keyframes van-left-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}}@keyframes van-left-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}}@-webkit-keyframes van-right-enter{from{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@keyframes van-right-enter{from{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@-webkit-keyframes van-right-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}}@keyframes van-right-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}} \ No newline at end of file +@import '../common/index.wxss';.van-popup{position:fixed;top:50%;left:50%;max-height:100%;overflow-y:auto;background-color:#fff;box-sizing:border-box;-webkit-animation:ease both;animation:ease both;-webkit-overflow-scrolling:touch;transition-timing-function:ease}.van-popup--center{-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.van-popup--top{top:0;right:auto;bottom:auto;left:50%;width:100%;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.van-popup--right{top:50%;right:0;bottom:auto;left:auto;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.van-popup--bottom{top:auto;right:auto;bottom:0;left:50%;width:100%;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.van-popup--left{top:50%;right:auto;bottom:auto;left:0;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.van-popup--safe{padding-bottom:34px}.van-scale-enter-active,.van-scale-leave-active{transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}.van-scale-enter,.van-scale-leave-to{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}.van-fade-enter-active,.van-fade-leave-active{transition-property:opacity}.van-fade-enter,.van-fade-leave-to{opacity:0}.van-center-enter-active,.van-center-leave-active{transition-property:opacity}.van-center-enter,.van-center-leave-to{opacity:0}.van-bottom-enter-active,.van-bottom-leave-active,.van-left-enter-active,.van-left-leave-active,.van-right-enter-active,.van-right-leave-active,.van-top-enter-active,.van-top-leave-active{transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}.van-bottom-enter,.van-bottom-leave-to{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}.van-top-enter,.van-top-leave-to{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}.van-left-enter,.van-left-leave-to{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}.van-right-enter,.van-right-leave-to{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)} \ No newline at end of file diff --git a/dist/tabs/index.js b/dist/tabs/index.js index fa6feddd..bdb44f0c 100644 --- a/dist/tabs/index.js +++ b/dist/tabs/index.js @@ -57,10 +57,6 @@ VantComponent({ offsetTop: { type: Number, value: 0 - }, - scrollTop: { - type: Number, - value: 0 } }, data: { @@ -83,16 +79,22 @@ VantComponent({ lineHeight: 'setLine', active: 'setActiveTab', animated: 'setTrack', - scrollTop: 'onScroll', offsetTop: 'setWrapStyle' }, beforeCreate: function beforeCreate() { this.child = []; }, mounted: function mounted() { + var _this = this; + this.setLine(true); this.setTrack(); this.scrollIntoView(); + this.getRect('.van-tabs__wrap').then(function (rect) { + _this.navHeight = rect.height; + + _this.observerContentScroll(); + }); }, destroyed: function destroyed() { wx.createIntersectionObserver(this).disconnect(); @@ -132,7 +134,7 @@ VantComponent({ } }, setLine: function setLine(skipTransition) { - var _this = this; + var _this2 = this; if (this.data.type !== 'line') { return; @@ -154,13 +156,13 @@ VantComponent({ left += (rect.width - width) / 2; var transition = skipTransition ? '' : "transition-duration: " + duration + "s; -webkit-transition-duration: " + duration + "s;"; - _this.set({ + _this2.set({ lineStyle: "\n " + height + "\n width: " + width + "px;\n background-color: " + color + ";\n -webkit-transform: translateX(" + left + "px);\n transform: translateX(" + left + "px);\n " + transition + "\n " }); }); }, setTrack: function setTrack() { - var _this2 = this; + var _this3 = this; var _this$data2 = this.data, animated = _this$data2.animated, @@ -170,27 +172,26 @@ VantComponent({ this.getRect('.van-tabs__content').then(function (rect) { var width = rect.width; - _this2.set({ - trackStyle: "\n width: " + width * _this2.child.length + "px;\n left: " + -1 * active * width + "px;\n transition: left " + duration + "s;\n display: flex;\n " + _this3.set({ + trackStyle: "\n width: " + width * _this3.child.length + "px;\n left: " + -1 * active * width + "px;\n transition: left " + duration + "s;\n display: -webkit-box;\n display: flex;\n " }); - _this2.setTabsProps({ + var props = { width: width, animated: animated + }; + + _this3.child.forEach(function (item) { + item.set(props); }); }); }, - setTabsProps: function setTabsProps(props) { - this.child.forEach(function (item) { - item.set(props); - }); - }, setActiveTab: function setActiveTab() { - var _this3 = this; + var _this4 = this; this.child.forEach(function (item, index) { var data = { - active: index === _this3.data.active + active: index === _this4.data.active }; if (data.active) { @@ -202,34 +203,35 @@ VantComponent({ } }); this.set({}, function () { - _this3.setLine(); + _this4.setLine(); - _this3.setTrack(); + _this4.setTrack(); - _this3.scrollIntoView(); + _this4.scrollIntoView(); }); }, // scroll active tab into view scrollIntoView: function scrollIntoView() { - var _this4 = this; + var _this5 = this; - if (!this.data.scrollable) { + var _this$data3 = this.data, + active = _this$data3.active, + scrollable = _this$data3.scrollable; + + if (!scrollable) { return; } - this.getRect('.van-tab', true).then(function (tabRects) { - var tabRect = tabRects[_this4.data.active]; - var offsetLeft = tabRects.slice(0, _this4.data.active).reduce(function (prev, curr) { + Promise.all([this.getRect('.van-tab', true), this.getRect('.van-tabs__nav')]).then(function (_ref) { + var tabRects = _ref[0], + navRect = _ref[1]; + var tabRect = tabRects[active]; + var offsetLeft = tabRects.slice(0, active).reduce(function (prev, curr) { return prev + curr.width; }, 0); - var tabWidth = tabRect.width; - _this4.getRect('.van-tabs__nav').then(function (navRect) { - var navWidth = navRect.width; - - _this4.set({ - scrollLeft: offsetLeft - (navWidth - tabWidth) / 2 - }); + _this5.set({ + scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2 }); }); }, @@ -244,9 +246,9 @@ VantComponent({ // watch swipe touch end onTouchEnd: function onTouchEnd() { if (!this.data.swipeable) return; - var _this$data3 = this.data, - active = _this$data3.active, - tabs = _this$data3.tabs; + var _this$data4 = this.data, + active = _this$data4.active, + tabs = _this$data4.tabs; var direction = this.direction, deltaX = this.deltaX, offsetX = this.offsetX; @@ -261,9 +263,9 @@ VantComponent({ } }, setWrapStyle: function setWrapStyle() { - var _this$data4 = this.data, - offsetTop = _this$data4.offsetTop, - position = _this$data4.position; + var _ref2 = this.data, + offsetTop = _ref2.offsetTop, + position = _ref2.position; var wrapStyle; switch (position) { @@ -285,40 +287,67 @@ VantComponent({ wrapStyle: wrapStyle }); }, - // adjust tab position - onScroll: function onScroll(scrollTop) { - var _this5 = this; + observerContentScroll: function observerContentScroll() { + var _this6 = this; + + if (!this.data.sticky) { + return; + } - if (!this.data.sticky) return; var offsetTop = this.data.offsetTop; - this.getRect('.van-tabs').then(function (rect) { - var top = rect.top, - height = rect.height; - _this5.getRect('.van-tabs__wrap').then(function (rect) { - var wrapHeight = rect.height; - var position = ''; + var _wx$getSystemInfoSync = wx.getSystemInfoSync(), + windowHeight = _wx$getSystemInfoSync.windowHeight; - if (offsetTop > top + height - wrapHeight) { - position = 'bottom'; - } else if (offsetTop > top) { - position = 'top'; - } + wx.createIntersectionObserver(this).relativeToViewport({ + top: -this.navHeight + }).observe('.van-tabs', function (res) { + var top = res.boundingClientRect.top; - _this5.$emit('scroll', { - scrollTop: scrollTop + offsetTop, - isFixed: position === 'top' - }); + if (top > 0) { + return; + } - if (position !== _this5.data.position) { - _this5.set({ - position: position - }, function () { - _this5.setWrapStyle(); - }); - } + var position = res.intersectionRatio > 0 ? 'top' : 'bottom'; + + _this6.$emit('scroll', { + scrollTop: top + offsetTop, + isFixed: position === 'top' }); + + _this6.setPosition(position); }); + wx.createIntersectionObserver(this).relativeToViewport({ + bottom: -(windowHeight - 1) + }).observe('.van-tabs', function (res) { + var _res$boundingClientRe = res.boundingClientRect, + top = _res$boundingClientRe.top, + bottom = _res$boundingClientRe.bottom; + + if (bottom < _this6.navHeight) { + return; + } + + var position = res.intersectionRatio > 0 ? 'top' : ''; + + _this6.$emit('scroll', { + scrollTop: top + offsetTop, + isFixed: position === 'top' + }); + + _this6.setPosition(position); + }); + }, + setPosition: function setPosition(position) { + var _this7 = this; + + if (position !== this.data.position) { + this.set({ + position: position + }).then(function () { + _this7.setWrapStyle(); + }); + } } } }); \ No newline at end of file diff --git a/dist/tabs/index.wxml b/dist/tabs/index.wxml index 9bba627b..ee8220d6 100644 --- a/dist/tabs/index.wxml +++ b/dist/tabs/index.wxml @@ -1,7 +1,9 @@ - - + + + + + + diff --git a/dist/transition/index.wxss b/dist/transition/index.wxss index bf95c4f3..adcbc5f6 100644 --- a/dist/transition/index.wxss +++ b/dist/transition/index.wxss @@ -1 +1 @@ -@import '../common/index.wxss';.van-transition{-webkit-animation:ease both;animation:ease both}@-webkit-keyframes van-fade-enter{from{opacity:0}to{opacity:1}}@keyframes van-fade-enter{from{opacity:0}to{opacity:1}}@-webkit-keyframes van-fade-leave{from{opacity:1}to{opacity:0}}@keyframes van-fade-leave{from{opacity:1}to{opacity:0}}@-webkit-keyframes van-fade-up-enter{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-fade-up-enter{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-fade-up-leave{to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-fade-up-leave{to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-up-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-up-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-up-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-up-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-fade-down-enter{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes van-fade-down-enter{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@-webkit-keyframes van-fade-down-leave{to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes van-fade-down-leave{to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@-webkit-keyframes van-slide-down-enter{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes van-slide-down-enter{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@-webkit-keyframes van-slide-down-leave{to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes van-slide-down-leave{to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@-webkit-keyframes van-fade-left-enter{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes van-fade-left-enter{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@-webkit-keyframes van-fade-left-leave{to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes van-fade-left-leave{to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@-webkit-keyframes van-slide-left-enter{from{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes van-slide-left-enter{from{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@-webkit-keyframes van-slide-left-leave{to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes van-slide-left-leave{to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@-webkit-keyframes van-fade-right-enter{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes van-fade-right-enter{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-webkit-keyframes van-fade-right-leave{to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes van-fade-right-leave{to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-webkit-keyframes van-slide-right-enter{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes van-slide-right-enter{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-webkit-keyframes van-slide-right-leave{to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes van-slide-right-leave{to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}} \ No newline at end of file +@import '../common/index.wxss';.van-transition{transition-timing-function:ease}.van-fade-enter-active,.van-fade-leave-active{transition-property:opacity}.van-fade-enter,.van-fade-leave-to{opacity:0}.van-fade-down-enter-active,.van-fade-down-leave-active,.van-fade-left-enter-active,.van-fade-left-leave-active,.van-fade-right-enter-active,.van-fade-right-leave-active,.van-fade-up-enter-active,.van-fade-up-leave-active{transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}.van-fade-up-enter,.van-fade-up-leave-to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.van-fade-down-enter,.van-fade-down-leave-to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.van-fade-left-enter,.van-fade-left-leave-to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.van-fade-right-enter,.van-fade-right-leave-to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.van-slide-down-enter-active,.van-slide-down-leave-active,.van-slide-left-enter-active,.van-slide-left-leave-active,.van-slide-right-enter-active,.van-slide-right-leave-active,.van-slide-up-enter-active,.van-slide-up-leave-active{transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}.van-slide-up-enter,.van-slide-up-leave-to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.van-slide-down-enter,.van-slide-down-leave-to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.van-slide-left-enter,.van-slide-left-leave-to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.van-slide-right-enter,.van-slide-right-leave-to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)} \ No newline at end of file