diff --git a/docs/uni-app-x/component/scroll-view.md b/docs/uni-app-x/component/scroll-view.md index f6f7454b3c042bf2cef6e76da3799336f76202dd..90edf951ddd3f8153e9b180169afc328cbf9da10 100644 --- a/docs/uni-app-x/component/scroll-view.md +++ b/docs/uni-app-x/component/scroll-view.md @@ -7,16 +7,16 @@ - + ### 自定义下拉刷新样式 1. 设置`refresher-default-style`属性为 none 不使用默认样式 2. 自定义下拉刷新元素必须要声明为 slot="refresher" 3. 通过组件提供的refresherpulling、refresherrefresh、refresherrestore、refresherabort下拉刷新事件调整自定义下拉刷新元素!实现预期效果 + +**注意:** 目前自定义下拉刷新元素不支持放在scroll-view的首个子元素位置上。可能无法正常显示 -**注意:** 目前自定义下拉刷新元素不支持放在scroll-view的首个子元素位置上。可能无法正常显示 - -```vue +```vue @@ -33,7 +33,45 @@ ``` -**具体代码请参考:**[自定义下拉刷新样式示例](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/scroll-view/scroll-view-custom-refresher-props.uvue) +**具体代码请参考:**[自定义下拉刷新样式示例](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/scroll-view/scroll-view-custom-refresher-props.uvue) + +### nested-scroll嵌套滚动协商 + ++ 通过设置`custom-nested-scroll = true`,开启与父组件实现嵌套滚动协商。仅list-view、scroll-view组件支持与父组件嵌套滚动协商! + ```html + + ... + 停靠视图 + + ... + + + ``` ++ 子组件准备滚动时会触发父组件的`startnestedscroll`事件。父组件响应`startnestedscroll`事件return ture则表示与子组件建立嵌套滚动协商。 + ```html + onStartNestedScroll(event: StartNestedScrollEvent): Boolean { + //开启与子组件建立嵌套滚动协商 + return true + } + ``` ++ 当建立嵌套滚动协商后!父组件会持续收到`nestedprescroll`事件,事件中会返回NestedPreScrollEvent子组件将要滚动的数据。 ++ 执行NestedPreScrollEvent.consumed(x,y)函数告知子组件本次`nestedprescroll`事件deltaX、deltaY各消耗多少。子组件将执行差值后的deltaX、deltaY滚动距离。 + ```html + onNestedPreScroll(event: NestedPreScrollEvent) { + var deltaY = event.deltaY + var deltaX = event.deltaX + ... + if() { + //告知子组件deltaX、deltaY各消耗多少 + event.consumed(x, y) + } + } + ``` ++ 滚动行为停止后会触发`stopnestedscroll`事件 ++ 仅Android平台支持嵌套滚动协商 + +**具体代码请参考:**[nested-scroll嵌套滚动示例](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/template/long-list/long-list.uvue)