Merge pull request #3115 from rex-zsd/feat/sticky_20200507

feat(sticky): add new prop scroll-top

example/pages/sticky/index.js

@@ -2,12 +2,26 @@ import Page from '../../common/page';
 
 Page({
   data: {
-    container: null
+    container: null,
+    scrollTop: 0,
+    offsetTop: 0,
   },
 
   onReady() {
     this.setData({
-      container: () => wx.createSelectorQuery().select('#container')
+      container: () => wx.createSelectorQuery().select('#container'),
     });
-  }
+  },
+
+  onScroll(event) {
+    wx.createSelectorQuery()
+      .select('#scroller')
+      .boundingClientRect((res) => {
+        this.setData({
+          scrollTop: event.detail.scrollTop,
+          offsetTop: res.top,
+        });
+      })
+      .exec();
+  },
 });

example/pages/sticky/index.wxml

@@ -23,3 +23,20 @@
     </van-sticky>
   </view>
 </demo-block>
+
+<demo-block title="嵌套在 scroll-view 内使用">
+  <scroll-view
+    bind:scroll="onScroll"
+    scroll-y
+    id="scroller"
+    style="height: 200px; background-color: #fff;"
+  >
+    <view style="height: 400px; padding-top: 50px;">
+      <van-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}">
+        <van-button type="warning">
+          嵌套在 scroll-view 内
+        </van-button>
+      </van-sticky>
+    </view>
+  </scroll-view>
+</demo-block>

example/project.config.json

@@ -348,6 +348,13 @@
 					"id": -1,
 					"name": "calendar",
 					"pathName": "pages/calendar/index",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "index-bar",
+					"pathName": "pages/index-bar/index",
 					"scene": null
 				}
 			]

packages/mixins/page-scroll.ts

@@ -27,10 +27,10 @@ export const pageScrollMixin = (scroller: Scroller) =>
       if (Array.isArray(page.vanPageScroller)) {
         page.vanPageScroller.push(scroller.bind(this));
       } else {
-        page.vanPageScroller = [
-          page.onPageScroll.bind(page),
-          scroller.bind(this)
-        ];
+        page.vanPageScroller =
+          typeof page.onPageScroll === 'function'
+            ? [page.onPageScroll.bind(page), scroller.bind(this)]
+            : [scroller.bind(this)];
       }
 
       page.onPageScroll = onPageScroll;
@@ -39,7 +39,7 @@ export const pageScrollMixin = (scroller: Scroller) =>
     detached() {
       const page = getCurrentPage();
       page.vanPageScroller = (page.vanPageScroller || []).filter(
-        item => item !== scroller
+        (item) => item !== scroller
       );
-    }
+    },
   });

packages/sticky/README.md

@@ -66,15 +66,58 @@ Page({
 });
 ```
 
+### 嵌套在 scroll-view 内使用
+
+通过 `scroll-top` 与 `offset-top` 属性可以实现在 scroll-view 内嵌套使用
+
+```html
+<scroll-view
+  bind:scroll="onScroll"
+  scroll-y
+  id="scroller"
+  style="height: 200px;"
+>
+  <view style="height: 400px; padding-top: 50px;">
+    <van-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}">
+      <van-button type="warning">
+        嵌套在 scroll-view 内
+      </van-button>
+    </van-sticky>
+  </view>
+</scroll-view>
+```
+
+```js
+Page({
+  data: {
+    scrollTop: 0,
+    offsetTop: 0,
+  },
+
+  onScroll(event) {
+    wx.createSelectorQuery()
+      .select('#scroller')
+      .boundingClientRect((res) => {
+        this.setData({
+          scrollTop: event.detail.scrollTop,
+          offsetTop: res.top,
+        });
+      })
+      .exec();
+  },
+});
+```
+
 ## API
 
 ### Props
 
-| 参数       | 说明                                   | 类型       | 默认值 |
-| ---------- | -------------------------------------- | ---------- | ------ |
-| offset-top | 吸顶时与顶部的距离，单位`px`           | _number_   | `0`    |
-| z-index    | 吸顶时的 z-index                       | _number_   | `99`   |
-| container  | 一个函数，返回容器对应的 NodesRef 节点 | _function_ | -      |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| offset-top | 吸顶时与顶部的距离，单位`px` | _number_ | `0` |
+| z-index | 吸顶时的 z-index | _number_ | `99` |
+| container | 一个函数，返回容器对应的 NodesRef 节点 | _function_ | - |
+| scroll-top | 当前滚动区域的滚动位置，非 `null` 时会禁用页面滚动事件的监听 | _number_ | - |
 
 ### Events
 

packages/sticky/index.ts

@@ -24,10 +24,19 @@ VantComponent({
       type: null,
       observer: 'onScroll',
     },
+    scrollTop: {
+      type: null,
+      observer(val) {
+        this.onScroll({ scrollTop: val });
+      },
+    },
   },
 
   mixins: [
     pageScrollMixin(function (event) {
+      if (this.data.scrollTop != null) {
+        return;
+      }
       this.onScroll(event);
     }),
   ],