[new feature]: 新增组件sticky (#1954)

example/app.json

@@ -32,6 +32,7 @@
     "pages/progress/index",
     "pages/stepper/index",
     "pages/steps/index",
+    "pages/sticky/index",
     "pages/switch/index",
     "pages/search/index",
     "pages/slider/index",
@@ -94,6 +95,7 @@
     "van-slider": "./dist/slider/index",
     "van-stepper": "./dist/stepper/index",
     "van-steps": "./dist/steps/index",
+    "van-sticky": "./dist/sticky/index",
     "van-submit-bar": "./dist/submit-bar/index",
     "van-swipe-cell": "./dist/swipe-cell/index",
     "van-switch": "./dist/switch/index",

example/config.js

@@ -129,6 +129,10 @@ export default [
         path: '/steps',
         title: 'Steps 步骤条'
       },
+      {
+        path: '/sticky',
+        title: 'Sticky 粘性布局'
+      },
       {
         path: '/tag',
         title: 'Tag 标记'

example/pages/sticky/index.js

@@ -0,0 +1,5 @@
+import Page from '../../common/page';
+
+Page({
+  data: {}
+});

example/pages/sticky/index.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "Sticky 粘性布局"
+}

example/pages/sticky/index.wxml

@@ -0,0 +1,15 @@
+<demo-block title="基础用法">
+  <van-sticky>
+    <van-button type="primary" style="margin-left: 15px">
+      基础用法
+    </van-button>
+  </van-sticky>
+</demo-block>
+
+<demo-block title="吸顶距离">
+  <van-sticky offset-top="{{30}}">
+    <van-button type="info" style="margin-left: 115px">
+      吸顶距离
+    </van-button>
+  </van-sticky>
+</demo-block>

example/pages/sticky/index.wxss

@@ -0,0 +1,14 @@
+page {
+  height: 200vh;
+}
+
+.van-button {
+  margin-left: 16px;
+}
+
+.sticky-container {
+  position: relative;
+  z-index: -1;
+  height: 150px;
+  background-color: #fff;
+}

packages/sticky/README.md

@@ -0,0 +1,46 @@
+# Sticky 粘性布局
+
+### 引入
+在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart)
+
+```json
+"usingComponents": {
+  "van-sticky": "path/to/vant-weapp/dist/sticky/index"
+}
+```
+
+
+## 代码演示
+
+### 基础用法
+
+将内容包裹在`Sticky`组件内即可
+
+```html
+<van-sticky>
+  <van-button type="primary">基础用法</van-button>
+</van-sticky>
+```
+
+### 吸顶距离
+
+通过`offset-top`属性可以设置组件在吸顶时与顶部的距离
+
+```html
+<van-sticky offset-top="{{ 30 }}">
+  <van-button type="info">吸顶距离</van-button>
+</van-sticky>
+```
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| offset-top | 吸顶时与顶部的距离，单位`px` | *number* | `0` |
+| z-index | 吸顶时的 z-index | *number* | `99` |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+|-----------|-----------|-----------|
+| scroll | 滚动时触发 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } |

packages/sticky/index.json

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

packages/sticky/index.less

@@ -0,0 +1,3 @@
+.van-sticky {
+  position: relative;
+}

packages/sticky/index.ts

@@ -0,0 +1,131 @@
+import { VantComponent } from '../common/component';
+import { nextTick } from '../common/utils';
+
+type Position = 'top' | 'bottom' | '';
+
+VantComponent({
+  props: {
+    zIndex: {
+      type: Number,
+      value: 1
+    },
+    offsetTop: {
+      type: Number,
+      value: 0
+    }
+  },
+
+  data: {
+    position: '', // 当前定位
+    height: 0,
+    wrapStyle: '',
+    containerStyle: ''
+  },
+
+  methods: {
+    setWrapStyle() {
+      const { offsetTop, position } = this.data as {
+        offsetTop: number
+        position: Position
+      };
+      let wrapStyle: string;
+      let containerStyle: string;
+
+      switch (position) {
+        case 'top':
+          wrapStyle = `
+            top: ${offsetTop}px;
+            position: fixed;
+          `;
+          containerStyle = `height: ${this.itemHeight}px;`;
+          break;
+        case 'bottom':
+          wrapStyle = `
+            top: auto;
+            bottom: 0;
+          `;
+          containerStyle = '';
+          break;
+        default:
+          wrapStyle = '';
+          containerStyle = '';
+      }
+
+      // cut down `set`x
+      let data: any = {};
+      if (wrapStyle !== this.data.wrapStyle) data.wrapStyle = wrapStyle;
+      if (containerStyle !== this.data.containerStyle) data.containerStyle = containerStyle;
+      if (JSON.stringify(data) !== '{}') this.set(data);
+    },
+
+    setPosition(position: Position) {
+      if (position !== this.data.position) {
+        this.set({ position });
+        nextTick(() => {
+          this.setWrapStyle();
+        });
+      }
+    },
+
+    observerContentScroll() {
+      const { offsetTop = 0 } = this.data;
+      const { windowHeight } = wx.getSystemInfoSync();
+
+      this.createIntersectionObserver({}).disconnect();
+
+      // @ts-ignore
+      this.createIntersectionObserver()
+        .relativeToViewport({ top: - (this.itemHeight + offsetTop) })
+        .observe('.van-sticky', (res: WechatMiniprogram.ObserveCallbackResult) => {
+          const { top } = res.boundingClientRect;
+
+          if (top > offsetTop) {
+            return;
+          }
+
+          const position: Position = 'top';
+
+          this.$emit('scroll', {
+            scrollTop: top + offsetTop,
+            isFixed: true
+          });
+
+          this.setPosition(position);
+        });
+
+      // @ts-ignore
+      this.createIntersectionObserver()
+        .relativeToViewport({ bottom: -(windowHeight - 1 - offsetTop) })
+        .observe('.van-sticky', (res: WechatMiniprogram.ObserveCallbackResult) => {
+          const { top, bottom } = res.boundingClientRect;
+
+          if (bottom <= this.itemHeight - 1) {
+            return;
+          }
+
+          const position: Position = res.intersectionRatio > 0 ? 'top' : '';
+
+          this.$emit('scroll', {
+            scrollTop: top + offsetTop,
+            isFixed: position === 'top'
+          });
+
+          this.setPosition(position);
+        });
+    }
+  },
+
+  mounted() {
+    this.getRect('.van-sticky').then(
+      (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
+        this.itemHeight = rect.height;
+        this.itemTop = rect.top;
+        this.observerContentScroll();
+      }
+    );
+  },
+
+  destroyed() {
+    this.createIntersectionObserver({}).disconnect();
+  }
+});

packages/sticky/index.wxml

@@ -0,0 +1,5 @@
+<view class="custom-class van-sticky" style="z-index: {{ zIndex }}; {{ containerStyle }}">
+  <view class="van-sticky-wrap" style="{{ wrapStyle }}">
+    <slot />
+  </view>
+</view>