From b273c89b3a94e276186a403fdc011a36d2776fdb Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 18 Jul 2019 17:48:18 +0800 Subject: [PATCH] [new feature] add sticky component (#3888) --- README.md | 2 +- README.zh-CN.md | 2 +- docs/markdown/intro.en-US.md | 2 +- docs/markdown/intro.zh-CN.md | 2 +- docs/site/doc.config.js | 8 ++ src/index.less | 1 + src/index.ts | 3 + src/sticky/README.md | 66 ++++++++++ src/sticky/README.zh-CN.md | 76 +++++++++++ src/sticky/demo/index.vue | 76 +++++++++++ src/sticky/index.js | 119 ++++++++++++++++++ src/sticky/index.less | 11 ++ .../test/__snapshots__/demo.spec.js.snap | 29 +++++ .../test/__snapshots__/index.spec.js.snap | 53 ++++++++ src/sticky/test/demo.spec.js | 6 + src/sticky/test/index.spec.js | 77 ++++++++++++ src/style/var.less | 3 + src/tab/test/__snapshots__/demo.spec.js.snap | 18 +-- src/tab/test/__snapshots__/index.spec.js.snap | 62 +++++---- src/tabs/index.js | 119 ++++++------------ src/tabs/index.less | 7 -- test/utils.ts | 32 ++++- types/index.d.ts | 1 + 23 files changed, 651 insertions(+), 124 deletions(-) create mode 100644 src/sticky/README.md create mode 100644 src/sticky/README.zh-CN.md create mode 100644 src/sticky/demo/index.vue create mode 100644 src/sticky/index.js create mode 100644 src/sticky/index.less create mode 100644 src/sticky/test/__snapshots__/demo.spec.js.snap create mode 100644 src/sticky/test/__snapshots__/index.spec.js.snap create mode 100644 src/sticky/test/demo.spec.js create mode 100644 src/sticky/test/index.spec.js diff --git a/README.md b/README.md index dac4aa0f3..43a52e514 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ ## Features -* 60 Reusable components +* 60+ Reusable components * 90% Unit test coverage * Extensive documentation and demos * Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) diff --git a/README.zh-CN.md b/README.zh-CN.md index a56e660f0..45178be1c 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -25,7 +25,7 @@ ## 特性 -* 60 个组件 +* 60+ 个组件 * 90% 单元测试覆盖率 * 完善的中英文文档和示例 * 支持按需引入 diff --git a/docs/markdown/intro.en-US.md b/docs/markdown/intro.en-US.md index 6bfed90b9..706ac2b68 100644 --- a/docs/markdown/intro.en-US.md +++ b/docs/markdown/intro.en-US.md @@ -8,7 +8,7 @@ ### Features -* 60 Reusable components +* 60+ Reusable components * 90% Unit test coverage * Extensive documentation and demos * Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) diff --git a/docs/markdown/intro.zh-CN.md b/docs/markdown/intro.zh-CN.md index 8c1e81917..623441b9d 100644 --- a/docs/markdown/intro.zh-CN.md +++ b/docs/markdown/intro.zh-CN.md @@ -8,7 +8,7 @@ ### 特性 -* 60 个组件 +* 60+ 个组件 * 90% 单元测试覆盖率 * 完善的中英文文档和示例 * 支持按需引入 diff --git a/docs/site/doc.config.js b/docs/site/doc.config.js index 1135945d0..50f133144 100644 --- a/docs/site/doc.config.js +++ b/docs/site/doc.config.js @@ -267,6 +267,10 @@ export default { path: '/steps', title: 'Steps 步骤条' }, + { + path: '/sticky', + title: 'Sticky 粘性布局' + }, { path: '/swipe', title: 'Swipe 轮播' @@ -605,6 +609,10 @@ export default { path: '/steps', title: 'Steps' }, + { + path: '/sticky', + title: 'Sticky' + }, { path: '/swipe', title: 'Swipe' diff --git a/src/index.less b/src/index.less index 6a18e94d0..15be97dd4 100644 --- a/src/index.less +++ b/src/index.less @@ -26,6 +26,7 @@ @import './rate/index'; @import './steps/index'; @import './step/index'; +@import './sticky/index'; @import './tag/index'; @import './tab/index'; @import './tabs/index'; diff --git a/src/index.ts b/src/index.ts index fd4e52058..9b9de6826 100644 --- a/src/index.ts +++ b/src/index.ts @@ -68,6 +68,7 @@ import Slider from './slider'; import Step from './step'; import Stepper from './stepper'; import Steps from './steps'; +import Sticky from './sticky'; import SubmitBar from './submit-bar'; import Swipe from './swipe'; import SwipeCell from './swipe-cell'; @@ -156,6 +157,7 @@ const components = [ Step, Stepper, Steps, + Sticky, SubmitBar, Swipe, SwipeCell, @@ -253,6 +255,7 @@ export { Step, Stepper, Steps, + Sticky, SubmitBar, Swipe, SwipeCell, diff --git a/src/sticky/README.md b/src/sticky/README.md new file mode 100644 index 000000000..7828bdc3f --- /dev/null +++ b/src/sticky/README.md @@ -0,0 +1,66 @@ +# Sticky + +### Install + +``` javascript +import { Sticky } from 'vant'; + +Vue.use(Sticky); +``` + +## Usage + +### Basic Usage + +```html + + Basic Usage + +``` + +### Offset Top + +```html + + Offset Top + +``` + +### Set Container + +```html +
+ + Set Container + +
+``` + +```js +export default { + data() { + return { + container: null + }; + }, + mounted() { + this.container = this.$refs.container; + } +}; +``` + +## API + +### Props + +| Attribute | Description | Type | Default | +|------|------|------|------| +| offset-top | Offset top | `number` | `0` | - | +| z-index | z-index when sticky | `number` | `99` | - | +| container | Container DOM | `HTMLElement` | - | - | + +### Events + +| Event | Description | Arguments | +|------|------|------| +| scroll | Triggered when scroll | object: { scrollTop, isFixed } | diff --git a/src/sticky/README.zh-CN.md b/src/sticky/README.zh-CN.md new file mode 100644 index 000000000..9f07aa0b1 --- /dev/null +++ b/src/sticky/README.zh-CN.md @@ -0,0 +1,76 @@ +# Sticky 粘性布局 + +### 介绍 + +Sticky 组件与 CSS 中`position: sticky`属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。 + +### 引入 + +``` javascript +import { Sticky } from 'vant'; + +Vue.use(Sticky); +``` + +## 代码演示 + +### 基础用法 + +将内容包裹在`Sticky`组件内即可 + +```html + + 基础用法 + +``` + +### 吸顶距离 + +通过`offset-top`属性可以设置组件在吸顶时与顶部的距离 + +```html + + 吸顶距离 + +``` + +### 指定容器 + +通过`container`属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会固定在容器的底部 + +```html +
+ + 指定容器 + +
+``` + +```js +export default { + data() { + return { + container: null + }; + }, + mounted() { + this.container = this.$refs.container; + } +}; +``` + +## API + +### Props + +| 参数 | 说明 | 类型 | 默认值 | 版本 | +|------|------|------|------|------| +| offset-top | 吸顶时与顶部的距离，单位`px` | `number` | `0` | - | +| z-index | 吸顶时的 z-index | `number` | `99` | - | +| container | 容器对应的 HTML 节点 | `HTMLElement` | - | - | + +### Events + +| 事件名 | 说明 | 回调参数 | +|------|------|------| +| scroll | 滚动时触发 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } | diff --git a/src/sticky/demo/index.vue b/src/sticky/demo/index.vue new file mode 100644 index 000000000..06e8b0a9a --- /dev/null +++ b/src/sticky/demo/index.vue @@ -0,0 +1,76 @@ + + + + + diff --git a/src/sticky/index.js b/src/sticky/index.js new file mode 100644 index 000000000..8fe2b7d97 --- /dev/null +++ b/src/sticky/index.js @@ -0,0 +1,119 @@ +import { createNamespace, isDef } from '../utils'; +import { BindEventMixin } from '../mixins/bind-event'; +import { getScrollTop, getElementTop, getScrollEventTarget } from '../utils/dom/scroll'; + +const [createComponent, bem] = createNamespace('sticky'); + +export default createComponent({ + mixins: [ + BindEventMixin(function (bind) { + if (!this.scroller) { + this.scroller = getScrollEventTarget(this.$el); + } + + bind(this.scroller, 'scroll', this.onScroll, true); + this.onScroll(); + }) + ], + + props: { + zIndex: Number, + container: null, + offsetTop: { + type: Number, + default: 0 + } + }, + + data() { + return { + fixed: false, + height: 0, + transform: 0 + }; + }, + + computed: { + style() { + if (!this.fixed) { + return; + } + + const style = {}; + + if (isDef(this.zIndex)) { + style.zIndex = this.zIndex; + } + + if (this.offsetTop && this.fixed) { + style.top = `${this.offsetTop}px`; + } + + if (this.transform) { + style.transform = `translate3d(0, ${this.transform}px, 0)`; + } + + return style; + } + }, + + methods: { + onScroll() { + this.height = this.$el.offsetHeight; + + const { container, offsetTop } = this; + const scrollTop = getScrollTop(this.scroller); + const topToPageTop = getElementTop(this.$el); + + const emitScrollEvent = () => { + this.$emit('scroll', { + scrollTop, + isFixed: this.fixed + }); + }; + + // The sticky component should be kept inside the container element + if (container) { + const bottomToPageTop = topToPageTop + container.offsetHeight; + + if (scrollTop + offsetTop + this.height > bottomToPageTop) { + const distanceToBottom = this.height + scrollTop - bottomToPageTop; + + if (distanceToBottom < this.height) { + this.fixed = true; + this.transform = -(distanceToBottom + offsetTop); + } else { + this.fixed = false; + } + + emitScrollEvent(); + return; + } + } + + if (scrollTop + offsetTop > topToPageTop) { + this.fixed = true; + this.transform = 0; + } else { + this.fixed = false; + } + + emitScrollEvent(); + } + }, + + render(h) { + const { fixed } = this; + const style = { + height: fixed ? `${this.height}px` : null + }; + + return ( +
+
+ {this.slots()} +
+
+ ); + } +}); diff --git a/src/sticky/index.less b/src/sticky/index.less new file mode 100644 index 000000000..c849d8bb5 --- /dev/null +++ b/src/sticky/index.less @@ -0,0 +1,11 @@ +@import '../style/var'; + +.van-sticky { + &--fixed { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: @sticky-z-index; + } +} diff --git a/src/sticky/test/__snapshots__/demo.spec.js.snap b/src/sticky/test/__snapshots__/demo.spec.js.snap new file mode 100644 index 000000000..3fa91b535 --- /dev/null +++ b/src/sticky/test/__snapshots__/demo.spec.js.snap @@ -0,0 +1,29 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders demo correctly 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; diff --git a/src/sticky/test/__snapshots__/index.spec.js.snap b/src/sticky/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..b76533137 --- /dev/null +++ b/src/sticky/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,53 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`container prop 1`] = ` +
+
+
+ Content +
+
+
+`; + +exports[`container prop 2`] = ` +
+
+
+ Content +
+
+
+`; + +exports[`offset-top prop 1`] = ` +
+
+ Content +
+
+`; + +exports[`sticky to top 1`] = ` +
+
+ Content +
+
+`; + +exports[`sticky to top 2`] = ` +
+
+ Content +
+
+`; + +exports[`z-index prop 1`] = ` +
+
+ Content +
+
+`; diff --git a/src/sticky/test/demo.spec.js b/src/sticky/test/demo.spec.js new file mode 100644 index 000000000..33bf02fb7 --- /dev/null +++ b/src/sticky/test/demo.spec.js @@ -0,0 +1,6 @@ +import Demo from '../demo'; +import demoTest from '../../../test/demo-test'; +import { mockHTMLElementOffset } from '../../../test/utils'; + +mockHTMLElementOffset(); +demoTest(Demo); diff --git a/src/sticky/test/index.spec.js b/src/sticky/test/index.spec.js new file mode 100644 index 000000000..899676e0b --- /dev/null +++ b/src/sticky/test/index.spec.js @@ -0,0 +1,77 @@ +import { mount, mockScrollTop, mockHTMLElementOffset } from '../../../test/utils'; +import Vue from 'vue'; +import Sticky from '..'; + +Vue.use(Sticky); + +test('sticky to top', () => { + const wrapper = mount({ + template: ` + + Content + + ` + }); + + expect(wrapper).toMatchSnapshot(); + mockScrollTop(100); + expect(wrapper).toMatchSnapshot(); + mockScrollTop(0); +}); + +test('z-index prop', () => { + const wrapper = mount({ + template: ` + + Content + + ` + }); + + mockHTMLElementOffset(); + mockScrollTop(100); + expect(wrapper).toMatchSnapshot(); + mockScrollTop(0); +}); + +test('offset-top prop', () => { + const wrapper = mount({ + template: ` + + Content + + ` + }); + + mockHTMLElementOffset(); + mockScrollTop(100); + expect(wrapper).toMatchSnapshot(); + mockScrollTop(0); +}); + +test('container prop', () => { + const wrapper = mount({ + template: ` +
+ + Content + +
+ `, + data() { + return { + container: null + }; + }, + mounted() { + this.container = this.$refs.container; + mockHTMLElementOffset(); + } + }); + + mockScrollTop(15); + expect(wrapper).toMatchSnapshot(); + mockScrollTop(25); + expect(wrapper).toMatchSnapshot(); + mockScrollTop(0); +}); diff --git a/src/style/var.less b/src/style/var.less index 7690ca4cd..f6b0e99bb 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -484,6 +484,9 @@ // Steps @steps-background-color: @white; +// Sticky +@sticky-z-index: 99; + // Stepper @stepper-active-color: #e8e8e8; @stepper-background-color: @active-color; diff --git a/src/tab/test/__snapshots__/demo.spec.js.snap b/src/tab/test/__snapshots__/demo.spec.js.snap index c670497a2..57720ab15 100644 --- a/src/tab/test/__snapshots__/demo.spec.js.snap +++ b/src/tab/test/__snapshots__/demo.spec.js.snap @@ -161,13 +161,17 @@ exports[`renders demo correctly 1`] = `
-
-
- - - - -
+
+
+
+
+ + + + +
+
+
diff --git a/src/tab/test/__snapshots__/index.spec.js.snap b/src/tab/test/__snapshots__/index.spec.js.snap index 8cabc463f..0a3c9f9a4 100644 --- a/src/tab/test/__snapshots__/index.spec.js.snap +++ b/src/tab/test/__snapshots__/index.spec.js.snap @@ -13,12 +13,16 @@ exports[`border props 1`] = ` exports[`change tabs data 1`] = `
-
-
- - - -
+
+
+
+
+ + + +
+
+
@@ -98,12 +102,16 @@ exports[`click to switch tab 2`] = ` exports[`lazy render 1`] = `
-
-
- - - -
+
+
+
+
+ + + +
+
+
@@ -120,12 +128,16 @@ exports[`lazy render 1`] = ` exports[`lazy render 2`] = `
-
-
- - - -
+
+
+
+
+ + + +
+
+
@@ -160,11 +172,15 @@ exports[`name prop 1`] = ` exports[`render nav-left & nav-right slot 1`] = `
-
-
Nav Left - - -
Nav Right +
+
+
+
Nav Left + + +
Nav Right +
+
diff --git a/src/tabs/index.js b/src/tabs/index.js index 7f54788e0..23b8a4fb5 100644 --- a/src/tabs/index.js +++ b/src/tabs/index.js @@ -1,24 +1,18 @@ import { createNamespace, isDef, addUnit } from '../utils'; import { scrollLeftTo } from './utils'; -import { on, off } from '../utils/dom/event'; import { ParentMixin } from '../mixins/relation'; import { BindEventMixin } from '../mixins/bind-event'; -import { - setRootScrollTop, - getScrollTop, - getElementTop, - getScrollEventTarget -} from '../utils/dom/scroll'; +import { setRootScrollTop, getElementTop } from '../utils/dom/scroll'; import Title from './Title'; import Content from './Content'; +import Sticky from '../sticky'; const [createComponent, bem] = createNamespace('tabs'); export default createComponent({ mixins: [ ParentMixin('vanTabs'), - BindEventMixin(function (bind, isBind) { - this.bindScrollEvent(isBind); + BindEventMixin(function (bind) { bind(window, 'resize', this.setLine, true); }) ], @@ -72,8 +66,6 @@ export default createComponent({ }, data() { - this.scrollEvent = false; - return { position: '', currentIndex: null, @@ -89,23 +81,6 @@ export default createComponent({ return this.children.length > this.swipeThreshold || !this.ellipsis; }, - wrapStyle() { - switch (this.position) { - case 'top': - return { - top: this.offsetTop + 'px', - position: 'fixed' - }; - case 'bottom': - return { - top: 'auto', - bottom: 0 - }; - default: - return null; - } - }, - navStyle() { return { borderColor: this.color, @@ -144,13 +119,9 @@ export default createComponent({ this.setLine(); // scroll to correct position - if (this.position === 'top' || this.position === 'bottom') { + if (this.stickyFixed) { setRootScrollTop(getElementTop(this.$el) - this.offsetTop); } - }, - - sticky(val) { - this.bindScrollEvent(val); } }, @@ -171,40 +142,6 @@ export default createComponent({ }); }, - bindScrollEvent(isBind) { - const sticky = this.sticky && isBind; - - if (this.scrollEvent !== sticky) { - this.scrollEvent = sticky; - this.scrollEl = this.scrollEl || getScrollEventTarget(this.$el); - (sticky ? on : off)(this.scrollEl, 'scroll', this.onScroll, true); - this.onScroll(); - } - }, - - // adjust tab position - onScroll() { - const scrollTop = getScrollTop(this.scrollEl) + this.offsetTop; - const elTopToPageTop = getElementTop(this.$el); - const elBottomToPageTop = - elTopToPageTop + this.$el.offsetHeight - this.$refs.wrap.offsetHeight; - - if (scrollTop > elBottomToPageTop) { - this.position = 'bottom'; - } else if (scrollTop > elTopToPageTop) { - this.position = 'top'; - } else { - this.position = ''; - } - - const scrollParams = { - scrollTop, - isFixed: this.position === 'top' - }; - - this.$emit('scroll', scrollParams); - }, - // update nav bar style setLine() { const shouldAnimate = this.inited; @@ -305,6 +242,11 @@ export default createComponent({ this.$nextTick(() => { this.$refs.titles[index].renderTitle(el); }); + }, + + onScroll(params) { + this.stickyFixed = params.isFixed; + this.$emit('scroll', params); } }, @@ -331,23 +273,36 @@ export default createComponent({ /> )); + const Wrap = ( +
+
+ {this.slots('nav-left')} + {Nav} + {type === 'line' &&
} + {this.slots('nav-right')} +
+
+ ); + return (
-
-
- {this.slots('nav-left')} - {Nav} - {type === 'line' &&
} - {this.slots('nav-right')} -
-
+ {this.sticky ? ( + + {Wrap} + + ) : ( + Wrap + )} | HTMLElement, + wrapper: Wrapper | HTMLElement | Window, eventName: string, x: number = 0, y: number = 0, @@ -80,3 +80,33 @@ export function mockGetBoundingClientRect(rect: ClientRect | DOMRect): Function Element.prototype.getBoundingClientRect = originMethod; }; } + +export function mockHTMLElementOffset() { + Object.defineProperties(HTMLElement.prototype, { + offsetLeft: { + get() { + return parseFloat(window.getComputedStyle(this).marginLeft) || 0; + } + }, + offsetTop: { + get() { + return parseFloat(window.getComputedStyle(this).marginTop) || 0; + } + }, + offsetHeight: { + get() { + return parseFloat(window.getComputedStyle(this).height) || 0; + } + }, + offsetWidth: { + get() { + return parseFloat(window.getComputedStyle(this).width) || 0; + } + } + }); +} + +export function mockScrollTop(value: number) { + Object.defineProperty(window, 'scrollTop', { value, writable: true }); + trigger(window, 'scroll'); +} diff --git a/types/index.d.ts b/types/index.d.ts index 27095ce85..1894036f5 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -70,6 +70,7 @@ export class Slider extends VanComponent {} export class Step extends VanComponent {} export class Stepper extends VanComponent {} export class Steps extends VanComponent {} +export class Sticky extends VanComponent {} export class SubmitBar extends VanComponent {} export class Swipe extends VanComponent {} export class SwipeItem extends VanComponent {}