feat(IndexBar): add IndexBar component (#2303)

example/app.json

@@ -45,7 +45,8 @@
     "pages/overlay/index",
     "pages/circle/index",
     "pages/grid/index",
-    "pages/dropdown-menu/index"
+    "pages/dropdown-menu/index",
+    "pages/index-bar/index"
   ],
   "window": {
     "navigationBarBackgroundColor": "#f8f8f8",
@@ -110,6 +111,8 @@
     "van-picker": "./dist/picker/index",
     "van-overlay": "./dist/overlay/index",
     "van-circle": "./dist/circle/index",
+    "van-index-bar": "./dist/index-bar/index",
+    "van-index-anchor": "./dist/index-anchor/index",
     "van-grid": "./dist/grid/index",
     "van-grid-item": "./dist/grid-item/index",
     "van-dropdown-menu": "./dist/dropdown-menu/index",

example/config.js

@@ -183,6 +183,10 @@ export default [
         path: '/grid',
         title: 'Grid 宫格'
       },
+      {
+        path: '/index-bar',
+        title: 'IndexBar 索引栏'
+      },
       {
         path: '/sidebar',
         title: 'Sidebar 侧边导航'

example/pages/index-bar/index.js

@@ -0,0 +1,28 @@
+import Page from '../../common/page';
+
+const indexList = [];
+const charCodeOfA = 'A'.charCodeAt(0);
+for (let i = 0; i < 26; i++) {
+  indexList.push(String.fromCharCode(charCodeOfA + i));
+}
+
+Page({
+  data: {
+    activeTab: 0,
+    indexList,
+    customIndexList: [1, 2, 3, 4, 5, 6, 8, 9, 10],
+    scrollTop: 0,
+  },
+
+  onChange(event) {
+    this.setData({
+      activeTab: event.detail.name
+    });
+  },
+
+  onPageScroll(event) {
+    this.setData({
+      scrollTop: event.scrollTop
+    });
+  }
+});

example/pages/index-bar/index.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "IndexBar 索引栏"
+}

example/pages/index-bar/index.wxml

@@ -0,0 +1,45 @@
+<van-tabs
+  active="{{ activeTab }}"
+  bind:change="onChange"
+>
+  <van-tab title="基础用法">
+    <van-index-bar
+      wx:if="{{ activeTab === 0 }}"
+      scroll-top="{{ scrollTop }}"
+    >
+      <view
+        wx:for="{{ indexList }}"
+        wx:for-item="item"
+        wx:key="item"
+      >
+        <van-index-anchor index="{{ item }}" />
+        <van-cell title="文本" />
+        <van-cell title="文本" />
+        <van-cell title="文本" />
+      </view>
+    </van-index-bar>
+  </van-tab>
+
+  <van-tab title="自定义索引列表">
+    <van-index-bar
+      wx:if="{{ activeTab === 1 }}"
+      index-list="{{ customIndexList }}"
+      scroll-top="{{ scrollTop }}"
+    >
+      <view
+        wx:for="{{ customIndexList }}"
+        wx:key="index"
+      >
+        <van-index-anchor
+          use-slot
+          index="{{ item }}"
+        >
+          <text>标题{{ item }}</text>
+        </van-index-anchor>
+        <van-cell title="文本" />
+        <van-cell title="文本" />
+        <van-cell title="文本" />
+      </view>
+    </van-index-bar>
+  </van-tab>
+</van-tabs>

packages/common/style/var.less

@@ -540,6 +540,20 @@
 @dropdown-menu-title-line-height: 18px;
 @dropdown-menu-option-active-color: @blue;
 
+// IndexAnchor
+@index-anchor-padding: 0 @padding-md;
+@index-anchor-text-color: @text-color;
+@index-anchor-font-weight: 500;
+@index-anchor-font-size: @font-size-md;
+@index-anchor-line-height: 32px;
+@index-anchor-background-color: transparent;
+@index-anchor-active-background-color: @white;
+@index-anchor-active-text-color: @green;
+
+// IndexBar
+@index-bar-index-font-size: @font-size-xs;
+@index-bar-index-line-height: 14px;
+
 // skeleton
 @skeleton-padding: 0 @padding-md;
 @skeleton-row-height: 16px;

packages/index-anchor/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

packages/index-anchor/index.less

@@ -0,0 +1,18 @@
+@import '../common/style/var.less';
+@import '../common/style/theme.less';
+
+.van-index-anchor {
+  .theme(padding, '@index-anchor-padding');
+  .theme(color, '@index-anchor-text-color');
+  .theme(font-weight, '@index-anchor-font-weight');
+  .theme(font-size, '@index-anchor-font-size');
+  .theme(line-height, '@index-anchor-line-height');
+  .theme(background-color, '@index-anchor-background-color');
+
+  &--active {
+    right: 0;
+    left: 0;
+    .theme(color, '@index-anchor-active-text-color');
+    .theme(background-color, '@index-anchor-active-background-color');
+  }
+}

packages/index-anchor/index.ts

@@ -0,0 +1,25 @@
+import { VantComponent } from '../common/component';
+
+VantComponent({
+  relation: {
+    name: 'index-bar',
+    type: 'ancestor',
+    linked(target) {
+      this.parent = target;
+    },
+    unlinked() {
+      this.parent = null;
+    }
+  },
+
+  props: {
+    useSlot: Boolean,
+    index: null
+  },
+
+  data: {
+    active: false,
+    wrapperStyle: '',
+    anchorStyle: ''
+  }
+});

packages/index-anchor/index.wxml

@@ -0,0 +1,14 @@
+<view
+  class="van-index-anchor-wrapper"
+  style="{{ wrapperStyle }}"
+>
+  <view
+    class="van-index-anchor {{ active ? 'van-index-anchor--active van-hairline--bottom' : '' }}"
+    style="{{ anchorStyle }}"
+  >
+    <slot wx:if="{{ useSlot }}"/>
+    <block wx:else>
+      <text>{{ index }}</text>
+    </block>
+  </view>
+</view>

packages/index-bar/README.md

@@ -0,0 +1,110 @@
+# IndexBar 索引栏
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
+
+```json
+"usingComponents": {
+  "van-index-bar": "path/to/vant-weapp/dist/van-index-bar/index",
+  "van-index-anchor": "path/to/vant-weapp/dist/van-index-anchor/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+点击索引栏时，会自动跳转到对应的`IndexAnchor`锚点位置
+
+```html
+<van-index-bar scroll-top="{{ scrollTop }}">
+  <van-index-anchor index="A" />
+  <van-cell title="文本" />
+  <van-cell title="文本" />
+  <van-cell title="文本" />
+
+  <van-index-anchor index="B" />
+  <van-cell title="文本" />
+  <van-cell title="文本" />
+  <van-cell title="文本" />
+
+  ...
+</van-index-bar>
+```
+
+```javascript
+Page({
+  onPageScroll(event) {
+    this.setData({
+      scrollTop: event.scrollTop
+    });
+  }
+});
+```
+
+### 自定义索引列表
+
+可以通过`index-list`属性自定义展示的索引字符列表，
+
+```html
+<van-index-bar index-list="{{ indexList }}">
+  <van-index-anchor index="1">标题1</van-index-anchor>
+  <van-cell title="文本" />
+  <van-cell title="文本" />
+  <van-cell title="文本" />
+
+  <van-index-anchor index="2">标题2</van-index-anchor>
+  <van-cell title="文本" />
+  <van-cell title="文本" />
+  <van-cell title="文本" />
+
+  ...
+</van-index-bar>
+```
+
+```javascript
+Page({
+  data: {
+    indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+  },
+
+  onPageScroll(event) {
+    this.setData({
+      scrollTop: event.scrollTop
+    });
+  }
+});
+```
+
+## API
+
+### IndexBar Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| scroll-top | 当前滚动高度（自定义组件内部感知不到页面滚动，所以依赖接入方传入）| *Number* | 0 | - |
+| index-list | 索引字符列表 | *string[] \| number[]* | `A-Z` | - |
+| z-index | z-index 层级 | *number* | `1` | - |
+| sticky | 是否开启锚点自动吸顶 | *boolean* | `true` | - |
+| sticky-offset-top | 锚点自动吸顶时与顶部的距离 | *number* | `0` | - |
+| highlight-color | 索引字符高亮颜色 | *string* | `#07c160` | - |
+
+### IndexAnchor Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| use-slot | 是否使用自定义内容的插槽 | *boolean* | `false` | - |
+| index | 索引字符 | *string \| number* | - | - |
+
+### IndexBar Events
+
+| 事件名 | 说明 | 回调参数 |
+|------|------|------|
+| select | 选中字符时触发 | index: 索引字符 |
+
+### IndexAnchor Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 锚点位置显示内容，默认为索引字符 |

packages/index-bar/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

packages/index-bar/index.less

@@ -0,0 +1,24 @@
+@import '../common/style/var.less';
+@import '../common/style/theme.less';
+
+.van-index-bar {
+  position: relative;
+
+  &__sidebar {
+    position: fixed;
+    top: 50%;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    transform: translateY(-50%);
+    user-select: none;
+  }
+
+  &__index {
+    font-weight: 500;
+    .theme(padding, '0 @padding-base 0 @padding-md');
+    .theme(font-size, '@index-bar-index-font-size');
+    .theme(line-height, '@index-bar-index-line-height');
+  }
+}

packages/index-bar/index.ts

@@ -0,0 +1,308 @@
+import { VantComponent } from '../common/component';
+import { GREEN } from '../common/color';
+
+const indexList = () => {
+  const indexList = [];
+  const charCodeOfA = 'A'.charCodeAt(0);
+
+  for (let i = 0; i < 26; i++) {
+    indexList.push(String.fromCharCode(charCodeOfA + i));
+  }
+
+  return indexList;
+};
+
+VantComponent({
+  relation: {
+    name: 'index-anchor',
+    type: 'descendant',
+    linked() {
+      this.updateData();
+    },
+    linkChanged() {
+      this.updateData();
+    },
+    unlinked() {
+      this.updateData();
+    }
+  },
+
+  props: {
+    sticky: {
+      type: Boolean,
+      value: true
+    },
+    zIndex: {
+      type: Number,
+      value: 1
+    },
+    highlightColor: {
+      type: String,
+      value: GREEN
+    },
+    scrollTop: {
+      type: Number,
+      value: 0,
+      observer: 'onScroll'
+    },
+    stickyOffsetTop: {
+      type: Number,
+      value: 0
+    },
+    indexList: {
+      type: Array,
+      value: indexList()
+    }
+  },
+
+  data: {
+    activeAnchorIndex: null,
+    showSidebar: false
+  },
+
+  methods: {
+    updateData() {
+      this.timer && clearTimeout(this.timer);
+
+      this.timer = setTimeout(() => {
+        this.children = this.getRelationNodes('../index-anchor/index');
+
+        this.setData({
+          showSidebar: !!this.children.length
+        });
+
+        this.setRect().then(() => {
+          this.onScroll();
+        });
+      }, 0);
+    },
+
+    setRect() {
+      return Promise.all([
+        this.setAnchorsRect(),
+        this.setListRect(),
+        this.setSiderbarRect()
+      ]);
+    },
+
+    setAnchorsRect() {
+      return Promise.all(
+        this.children.map(anchor => (
+          anchor.getRect('.van-index-anchor-wrapper').then(
+            (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
+              Object.assign(anchor, {
+                height: rect.height,
+                top: rect.top + this.data.scrollTop
+              });
+            }
+          )
+        ))
+      );
+    },
+
+    setListRect() {
+      return this.getRect('.van-index-bar').then(
+        (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
+          Object.assign(this, {
+            height: rect.height,
+            top: rect.top + this.data.scrollTop
+          });
+        }
+      );
+    },
+
+    setSiderbarRect() {
+      return this.getRect('.van-index-bar__sidebar').then(res => {
+        this.sidebar = {
+          height: res.height,
+          top: res.top
+        };
+      });
+    },
+
+    setDiffData({ target, data }) {
+      const diffData = {};
+
+      Object.keys(data).forEach(key => {
+        if (target.data[key] !== data[key]) {
+          diffData[key] = data[key];
+        }
+      });
+
+      if (Object.keys(diffData).length) {
+        target.setData(diffData);
+      }
+    },
+
+    getAnchorRect(anchor) {
+      return anchor.getRect('.van-index-anchor-wrapper').then(
+        (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => (
+          {
+            height: rect.height,
+            top: rect.top
+          }
+        )
+      );
+    },
+
+    getActiveAnchorIndex() {
+      const { children } = this;
+      const {
+        sticky,
+        scrollTop,
+        stickyOffsetTop
+      } = this.data;
+
+      for (let i = this.children.length - 1; i >= 0; i--) {
+        const preAnchorHeight = i > 0 ? children[i - 1].height : 0;
+        const reachTop = sticky ? preAnchorHeight + stickyOffsetTop : 0;
+
+        if (reachTop + scrollTop >= children[i].top) {
+          return i;
+        }
+      }
+
+      return -1;
+    },
+
+    onScroll() {
+      const {
+        children = []
+      } = this;
+
+      if (!children.length) {
+        return;
+      }
+
+      const {
+        sticky,
+        stickyOffsetTop,
+        zIndex,
+        highlightColor,
+        scrollTop
+      } = this.data;
+
+      const active = this.getActiveAnchorIndex();
+
+      this.setDiffData({
+        target: this,
+        data: {
+          activeAnchorIndex: active
+        }
+      });
+
+      if (sticky) {
+        let isActiveAnchorSticky = false;
+
+        if (active !== -1) {
+          isActiveAnchorSticky = children[active].top <= stickyOffsetTop + scrollTop;
+        }
+
+        children.forEach((item, index) => {
+          if (index === active) {
+            let wrapperStyle = '';
+            let anchorStyle = `
+              color: ${highlightColor};
+            `;
+
+            if (isActiveAnchorSticky) {
+              wrapperStyle = `
+                height: ${children[index].height}px;
+              `;
+
+              anchorStyle = `
+                position: fixed;
+                top: ${stickyOffsetTop}px;
+                z-index: ${zIndex};
+                color: ${highlightColor};
+              `;
+            }
+
+            this.setDiffData({
+              target: item,
+              data: {
+                active: true,
+                anchorStyle,
+                wrapperStyle
+              }
+            });
+          } else if (index === active - 1) {
+            const currentAnchor = children[index];
+
+            const currentOffsetTop = currentAnchor.top;
+            const targetOffsetTop = index === children.length - 1
+              ? this.top
+              : children[index + 1].top;
+
+            const parentOffsetHeight = targetOffsetTop - currentOffsetTop;
+            const translateY = parentOffsetHeight - currentAnchor.height;
+
+            const anchorStyle = `
+              position: relative;
+              transform: translate3d(0, ${translateY}px, 0);
+              z-index: ${zIndex};
+              color: ${highlightColor};
+            `;
+
+            this.setDiffData({
+              target: item,
+              data: {
+                active: true,
+                anchorStyle
+              }
+            });
+          } else {
+            this.setDiffData({
+              target: item,
+              data: {
+                active: false,
+                anchorStyle: '',
+                wrapperStyle: '',
+              }
+            });
+          }
+        });
+      }
+    },
+
+    onClick(event) {
+      this.scrollToAnchor(event.target.dataset.index);
+    },
+
+    onTouchMove(event) {
+      const sidebarLength = this.children.length;
+      const touch = event.touches[0];
+      const itemHeight = this.sidebar.height / sidebarLength;
+      let index = Math.floor((touch.clientY - this.sidebar.top) / itemHeight);
+
+      if (index < 0) {
+        index = 0;
+      } else if (index > sidebarLength - 1) {
+        index = sidebarLength - 1;
+      }
+
+      this.scrollToAnchor(index);
+    },
+
+    onTouchStop() {
+      this.scrollToAnchorIndex = null;
+    },
+
+    scrollToAnchor(index) {
+      if (typeof index !== 'number' || this.scrollToAnchorIndex === index) {
+        return;
+      }
+
+      this.scrollToAnchorIndex = index;
+
+      const anchor = this.children.filter(item => item.data.index === this.data.indexList[index])[0];
+
+      this.$emit('select', anchor.data.index);
+
+      anchor && wx.pageScrollTo({
+        duration: 0,
+        scrollTop: anchor.top
+      });
+    }
+  }
+});

packages/index-bar/index.wxml

@@ -0,0 +1,22 @@
+<view class="van-index-bar">
+  <slot />
+
+  <view
+    wx:if="{{ showSidebar }}"
+    class="van-index-bar__sidebar"
+    catch:tap="onClick"
+    catch:touchmove="onTouchMove"
+    catch:touchend="onTouchStop"
+    catch:touchcancel="onTouchStop"
+  >
+    <view
+      wx:for="{{ indexList }}"
+      wx:key="index"
+      class="van-index-bar__index"
+      style="z-index: {{ zIndex + 1 }}; color: {{ activeAnchorIndex === index ? highlightColor : '' }}"
+      data-index="{{ index }}"
+    >
+      {{ item }}
+    </view>
+  </view>
+</view>