[new feature] IndexBar: add sticky prop (#3402)

docs/markdown/changelog.zh-CN.md

@@ -2,6 +2,10 @@
 
 ### [v2.0.0-beta.3](https://github.com/youzan/vant/tree/v2.0.0-beta.3)
 
+##### IndexBar
+
+- 新增`sticky`参数
+
 ##### Rate
 
 - 新增`gutter`属性

packages/index-anchor/index.js

@@ -10,6 +10,32 @@ export default sfc({
     index: [String, Number]
   },
 
+  data() {
+    return {
+      top: 0,
+      active: false
+    };
+  },
+
+  computed: {
+    sticky() {
+      return this.active && this.parent.sticky;
+    },
+
+    anchorStyle() {
+      if (this.sticky) {
+        return {
+          top: `${this.top}px`,
+          zIndex: `${this.parent.zIndex}`
+        };
+      }
+    }
+  },
+
+  mounted() {
+    this.height = this.$el.offsetHeight;
+  },
+
   methods: {
     scrollIntoView() {
       this.$el.scrollIntoView();
@@ -17,9 +43,16 @@ export default sfc({
   },
 
   render(h) {
+    const { sticky } = this;
+
     return (
-      <div class={bem()}>
+      <div style={{ height: sticky ? `${this.height}px` : null }}>
-        {this.slots('default') ? this.slots('default') : this.index}
+        <div
+          style={this.anchorStyle}
+          class={[bem({ sticky }), { 'van-hairline--bottom': sticky }]}
+        >
+          {this.slots('default') || this.index}
+        </div>
       </div>
     );
   }

packages/index-anchor/index.less

@@ -5,4 +5,15 @@
   font-weight: @index-anchor-font-weight;
   font-size: @index-anchor-font-size;
   line-height: @index-anchor-line-height;
+  background-color: transparent;
+  transition: background-color .2s;
+
+  &--sticky {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 1;
+    background-color: #fff;
+  }
 }

packages/index-bar/en-US.md

@@ -64,6 +64,7 @@ export default {
 |------|------|------|------|
 | index-list | Index List | `Array` | `A-Z` |
 | z-index | z-index | `Number` | `1` |
+| sticky | Whether to enable anchor sticky top | `Boolean` | `true` |
 
 ### IndexAnchor Props
 

packages/index-bar/index.js

@@ -1,6 +1,8 @@
 import { use } from '../utils';
 import { TouchMixin } from '../mixins/touch';
 import { ParentMixin } from '../mixins/relation';
+import { on, off } from '../utils/event';
+import { getScrollTop, getElementTop, getScrollEventTarget } from '../utils/scroll';
 
 const [sfc, bem] = use('index-bar');
 
@@ -8,6 +10,10 @@ export default sfc({
   mixins: [TouchMixin, ParentMixin('vanIndexBar')],
 
   props: {
+    sticky: {
+      type: Boolean,
+      default: true
+    },
     zIndex: {
       type: Number,
       default: 1
@@ -27,13 +33,72 @@ export default sfc({
     }
   },
 
+  mounted() {
+    this.scroller = getScrollEventTarget(this.$el);
+    this.handler(true);
+  },
+
+  destroyed() {
+    this.handler(false);
+  },
+
+  activated() {
+    this.handler(true);
+  },
+
+  deactivated() {
+    this.handler(false);
+  },
+
   methods: {
-    onClick(event) {
+    handler(bind) {
-      this.scrollToElement(event.target);
+      /* istanbul ignore else */
+      if (this.binded !== bind) {
+        this.binded = bind;
+        (bind ? on : off)(this.scroller, 'scroll', this.onScroll);
+      }
     },
 
-    onTouchStart(event) {
+    onScroll() {
-      this.touchStart(event);
+      if (!this.sticky) {
+        return;
+      }
+
+      const scrollTop = getScrollTop(this.scroller);
+      const rects = this.children.map(item => ({
+        height: item.height,
+        top: getElementTop(item.$el)
+      }));
+
+      const active = this.getActiveAnchorIndex(scrollTop, rects);
+
+      this.children.forEach((item, index) => {
+        if (index === active) {
+          item.active = true;
+          item.top = Math.max(0, rects[index].top - scrollTop);
+        } else if (index === active - 1) {
+          const activeItemTop = rects[active].top - scrollTop;
+          item.active = activeItemTop > 0;
+          item.top = activeItemTop - rects[active].height;
+        } else {
+          item.active = false;
+        }
+      });
+    },
+
+    getActiveAnchorIndex(scrollTop, rects) {
+      for (let i = this.children.length - 1; i >= 0; i--) {
+        const prevHeight = i > 0 ? rects[i - 1].height : 0;
+
+        if (scrollTop + prevHeight >= rects[i].top) {
+          return i;
+        }
+      }
+      return -1;
+    },
+
+    onClick(event) {
+      this.scrollToElement(event.target);
     },
 
     onTouchMove(event) {
@@ -80,7 +145,7 @@ export default sfc({
           class={bem('sidebar')}
           style={{ zIndex: this.zIndex }}
           onClick={this.onClick}
-          onTouchstart={this.onTouchStart}
+          onTouchstart={this.touchStart}
           onTouchmove={this.onTouchMove}
           onTouchend={this.onTouchEnd}
           onTouchcancel={this.onTouchEnd}

packages/index-bar/test/__snapshots__/demo.spec.js.snap

@@ -15,7 +15,9 @@ exports[`renders demo correctly 1`] = `
         <div class="van-index-bar">
           <div class="van-index-bar__sidebar" style="z-index: 1;"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
           <div>
-            <div class="van-index-anchor">A</div>
+            <div>
+              <div class="van-index-anchor">A</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -27,7 +29,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">B</div>
+            <div>
+              <div class="van-index-anchor">B</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -39,7 +43,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">C</div>
+            <div>
+              <div class="van-index-anchor">C</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -51,7 +57,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">D</div>
+            <div>
+              <div class="van-index-anchor">D</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -63,7 +71,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">E</div>
+            <div>
+              <div class="van-index-anchor">E</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -75,7 +85,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">F</div>
+            <div>
+              <div class="van-index-anchor">F</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -87,7 +99,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">G</div>
+            <div>
+              <div class="van-index-anchor">G</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -99,7 +113,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">H</div>
+            <div>
+              <div class="van-index-anchor">H</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -111,7 +127,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">I</div>
+            <div>
+              <div class="van-index-anchor">I</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -123,7 +141,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">J</div>
+            <div>
+              <div class="van-index-anchor">J</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -135,7 +155,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">K</div>
+            <div>
+              <div class="van-index-anchor">K</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -147,7 +169,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">L</div>
+            <div>
+              <div class="van-index-anchor">L</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -159,7 +183,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">M</div>
+            <div>
+              <div class="van-index-anchor">M</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -171,7 +197,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">N</div>
+            <div>
+              <div class="van-index-anchor">N</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -183,7 +211,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">O</div>
+            <div>
+              <div class="van-index-anchor">O</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -195,7 +225,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">P</div>
+            <div>
+              <div class="van-index-anchor">P</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -207,7 +239,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">Q</div>
+            <div>
+              <div class="van-index-anchor">Q</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -219,7 +253,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">R</div>
+            <div>
+              <div class="van-index-anchor">R</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -231,7 +267,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">S</div>
+            <div>
+              <div class="van-index-anchor">S</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -243,7 +281,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">T</div>
+            <div>
+              <div class="van-index-anchor">T</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -255,7 +295,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">U</div>
+            <div>
+              <div class="van-index-anchor">U</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -267,7 +309,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">V</div>
+            <div>
+              <div class="van-index-anchor">V</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -279,7 +323,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">W</div>
+            <div>
+              <div class="van-index-anchor">W</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -291,7 +337,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">X</div>
+            <div>
+              <div class="van-index-anchor">X</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -303,7 +351,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">Y</div>
+            <div>
+              <div class="van-index-anchor">Y</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>
@@ -315,7 +365,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
           <div>
-            <div class="van-index-anchor">Z</div>
+            <div>
+              <div class="van-index-anchor">Z</div>
+            </div>
             <div class="van-cell">
               <div class="van-cell__title"><span>文本</span></div>
             </div>

packages/index-bar/test/__snapshots__/index.spec.js.snap

@@ -3,7 +3,11 @@
 exports[`custom anchor text 1`] = `
 <div class="van-index-bar">
   <div class="van-index-bar__sidebar" style="z-index: 1;"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
-  <div class="van-index-anchor">Title A</div>
+  <div>
-  <div class="van-index-anchor">Title B</div>
+    <div class="van-index-anchor">Title A</div>
+  </div>
+  <div>
+    <div class="van-index-anchor">Title B</div>
+  </div>
 </div>
 `;

packages/index-bar/zh-CN.md

@@ -68,6 +68,7 @@ export default {
 |------|------|------|------|------|
 | index-list | 索引字符列表 | `Array` | `A-Z` | - |
 | z-index | z-index 层级 | `Number` | `1` | - |
+| sticky | 是否开启锚点自动吸顶 | `Boolean` | `true` | - |
 
 ### IndexAnchor Props
 

packages/slider/test/index.spec.js

@@ -1,17 +1,17 @@
 import Slider from '..';
-import { mount, trigger, triggerDrag } from '../../../test/utils';
+import { mount, trigger, triggerDrag, mockGetBoundingClientRect } from '../../../test/utils';
 
-function mockGetBoundingClientRect(vertical) {
+function mockRect(vertical) {
-  Element.prototype.getBoundingClientRect = jest.fn(() => ({
+  return mockGetBoundingClientRect({
     width: vertical ? 0 : 100,
     height: vertical ? 100 : 0,
     top: vertical ? 0 : 100,
     left: vertical ? 100 : 0
-  }));
+  });
 }
 
 test('drag button', () => {
-  mockGetBoundingClientRect();
+  const restoreMock = mockRect();
 
   const wrapper = mount(Slider, {
     propsData: {
@@ -37,10 +37,12 @@ test('drag button', () => {
   expect(wrapper).toMatchSnapshot();
   expect(wrapper.emitted('drag-start')).toBeTruthy();
   expect(wrapper.emitted('drag-end')).toBeTruthy();
+
+  restoreMock();
 });
 
 it('click bar', () => {
-  mockGetBoundingClientRect();
+  const restoreMock = mockRect();
 
   const wrapper = mount(Slider, {
     propsData: {
@@ -59,10 +61,12 @@ it('click bar', () => {
   wrapper.setData({ disabled: false });
   trigger(wrapper, 'click', 100, 0);
   expect(wrapper).toMatchSnapshot();
+
+  restoreMock();
 });
 
 test('drag button vertical', () => {
-  mockGetBoundingClientRect(true);
+  const restoreMock = mockRect(true);
 
   const wrapper = mount(Slider, {
     propsData: {
@@ -78,10 +82,12 @@ test('drag button vertical', () => {
   const button = wrapper.find('.van-slider__button');
   triggerDrag(button, 0, 50);
   expect(wrapper).toMatchSnapshot();
+
+  restoreMock();
 });
 
 it('click vertical', () => {
-  mockGetBoundingClientRect(true);
+  const restoreMock = mockRect(true);
 
   const wrapper = mount(Slider, {
     propsData: {
@@ -96,4 +102,6 @@ it('click vertical', () => {
 
   trigger(wrapper, 'click', 0, 100);
   expect(wrapper).toMatchSnapshot();
+
+  restoreMock();
 });

packages/swipe-cell/test/index.spec.js

@@ -1,5 +1,5 @@
 import SwipeCell from '..';
-import { mount, triggerDrag, later } from '../../../test/utils';
+import { mount, triggerDrag, later, mockGetBoundingClientRect } from '../../../test/utils';
 
 const THRESHOLD = 0.15;
 const defaultProps = {
@@ -13,12 +13,6 @@ const defaultProps = {
   }
 };
 
-function mockGetBoundingClientRect(vertical) {
-  Element.prototype.getBoundingClientRect = jest.fn(() => ({
-    width: 50
-  }));
-}
-
 it('drag and show left part', () => {
   const wrapper = mount(SwipeCell, defaultProps);
 
@@ -98,7 +92,9 @@ it('disabled prop', () => {
 });
 
 it('auto calc width', async () => {
-  mockGetBoundingClientRect();
+  const restoreMock = mockGetBoundingClientRect({
+    width: 50
+  });
 
   const wrapper = mount(SwipeCell, {
     scopedSlots: defaultProps.scopedSlots
@@ -107,4 +103,6 @@ it('auto calc width', async () => {
   await later();
   triggerDrag(wrapper, 100, 0);
   expect(wrapper).toMatchSnapshot();
+
+  restoreMock();
 });

packages/swipe/test/demo.spec.js

@@ -1,12 +1,17 @@
 import Demo from '../demo';
 import demoTest from '../../../test/demo-test';
+import { mockGetBoundingClientRect } from '../../../test/utils';
 
-function mockGetBoundingClientRect(vertical) {
+let restore;
-  Element.prototype.getBoundingClientRect = jest.fn(() => ({
-    width: 100,
-    height: 100
-  }));
-}
 
-mockGetBoundingClientRect();
+demoTest(Demo, {
-demoTest(Demo);
+  hookBeforeTest: () => {
+    restore = mockGetBoundingClientRect({
+      width: 100,
+      height: 100
+    });
+  },
+  hookAfterTest: () => {
+    restore();
+  }
+});

packages/tabs/index.js

@@ -239,6 +239,7 @@ export default sfc({
       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) {
@@ -246,10 +247,12 @@ export default sfc({
       } else {
         this.position = '';
       }
+
       const scrollParams = {
         scrollTop,
         isFixed: this.position === 'top'
       };
+
       this.$emit('scroll', scrollParams);
     },
 

test/demo-test.ts

@@ -13,8 +13,12 @@ const empty = {
 Vue.component('demo-block', empty);
 Vue.component('demo-section', empty);
 
-export default function (Demo: any) {
+export default function (Demo: any, option: any = {}) {
   test('renders demo correctly', async () => {
+    if (option.hookBeforeTest) {
+      option.hookBeforeTest();
+    }
+
     if (Demo.i18n) {
       Locale.add(Demo.i18n);
     }
@@ -24,5 +28,9 @@ export default function (Demo: any) {
     await later();
 
     expect(wrapper).toMatchSnapshot();
+
+    if (option.hookAfterTest) {
+      option.hookAfterTest();
+    }
   });
 }

test/utils.ts

@@ -70,3 +70,13 @@ export function later(delay: number = 0): Promise<void> {
 export function transitionStub(): void {
   Vue.component('transition', TransitionStub as any);
 }
+
+export function mockGetBoundingClientRect(rect: ClientRect | DOMRect): Function {
+  const originMethod = Element.prototype.getBoundingClientRect;
+
+  Element.prototype.getBoundingClientRect = <any> jest.fn(() => rect);
+
+  return function () {
+    Element.prototype.getBoundingClientRect = originMethod;
+  };
+}