Skip to content

Commit

Permalink
Merge pull request raxjs#300 from raxjs/fix/runtime-miniapp-scrollview
Browse files Browse the repository at this point in the history 
fix(scrollview): can't update scroll-left/scroll-top/scroll-into-view
  • Loading branch information
@ChrisCindy
ChrisCindy authored Oct 15, 2020
2 parents c714c67 + 455dd82 commit 4ee8f06
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 11 deletions.
4 changes: 2 additions & 2 deletions packages/rax-scrollview/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ $ npm install rax-scrollview --save
| ------------------------------ | ---------- | ---------- | -------- | ----------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| scrollEventThrottle | `number` | 50 | false | 这个属性控制在滚动过程中，scroll 事件被调用的频率，用于滚动的节流 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /> |
| horizontal | `boolean` | - | false | 设置为横向滚动 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /><img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /> <img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px"><img alt="bytedanceMicroApp" src="https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg" width="25px" height="25px" /> <img alt="quickApp" src="https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-200-200.svg" width="25px" height="25px">|
| scrollTop | `number` | 0 | false | 竖向滚动距离，优先级高于`scrollTo`方法 | <img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /> <img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px"><img alt="bytedanceMicroApp" src="https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg" width="25px" height="25px" /> |
| scrollLeft | `number` | 0 | false | 横向滚动距离，优先级高于`scrollTo`方法 | <img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /> <img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px"><img alt="bytedanceMicroApp" src="https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg" width="25px" height="25px" /> |
| scrollTop | `number` | 0 | false | 竖向滚动距离，优先级高于`scrollTo`方法（注：运行时小程序无法生效，请使用 `scrollTo` 方案） | <img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /> <img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px"><img alt="bytedanceMicroApp" src="https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg" width="25px" height="25px" /> |
| scrollLeft | `number` | 0 | false | 横向滚动距离，优先级高于`scrollTo`方法（注：运行时小程序无法生效，请使用 `scrollTo` 方案） | <img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /> <img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px"><img alt="bytedanceMicroApp" src="https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg" width="25px" height="25px" /> |
| showsHorizontalScrollIndicator | `boolean` | true | false | 是否允许出现水平滚动条 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /> |
| showsVerticalScrollIndicator | `boolean` | true | false | 是否允许出现垂直滚动条 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /> |
| onEndReachedThreshold | `number` | 500 | false | 设置加载更多的偏移 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /><img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /> <img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px"><img alt="bytedanceMicroApp" src="https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg" width="25px" height="25px" /> |
Expand Down
2 changes: 1 addition & 1 deletion packages/rax-scrollview/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "rax-scrollview",
"version": "3.3.3",
"version": "3.3.4",
"description": "ScrollView component for Rax.",
"license": "BSD-3-Clause",
"main": "lib/index.js",
Expand Down
16 changes: 8 additions & 8 deletions packages/rax-scrollview/src/miniapp/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@ const ScrollView: ForwardRefExoticComponent<ScrollViewProps> = forwardRef(
disableScroll = false,
onEndReachedThreshold
} = props;
const [scrollTop, setScrollTop] = useState(0);
const [scrollLeft, setScrollLeft] = useState(0);
const [scrollTop] = useState(0);
const [scrollLeft] = useState(0);
const [scrollWithAnimation, setScrollWithAnimation] = useState(false);
const [scrollAnimationDuration, setScrollAnimationDuration] = useState(ANIMATION_DURATION);
const [scrollIntoViewId, setScrollIntoViewId] = useState(null);
const [scrollIntoViewId] = useState(null);
const scrollerRef = useRef<HTMLDivElement>(null);
const handleScroll = e => {
if (onScroll) {
Expand All @@ -55,9 +55,9 @@ const ScrollView: ForwardRefExoticComponent<ScrollViewProps> = forwardRef(
_nativeNode: scrollerRef.current,
resetScroll() {
if (horizontal) {
setScrollLeft(0);
scrollerRef.current.setAttribute('scroll-left', '0');
} else {
setScrollTop(0);
scrollerRef.current.setAttribute('scroll-top', '0');
}
},
scrollTo(options?: {
Expand All @@ -70,9 +70,9 @@ const ScrollView: ForwardRefExoticComponent<ScrollViewProps> = forwardRef(

// Scroll event caused by users can not change scroll-top or scroll-left, so here we add some slight random element to force update
if (horizontal) {
setScrollLeft(x + Math.random() * 0.1);
scrollerRef.current.setAttribute('scroll-left', String(x));
} else {
setScrollTop(y + Math.random() * 0.1);
scrollerRef.current.setAttribute('scroll-top', String(y));
}
setScrollWithAnimation(animated);
setScrollAnimationDuration(duration);
Expand All @@ -86,7 +86,7 @@ const ScrollView: ForwardRefExoticComponent<ScrollViewProps> = forwardRef(
if (!id) {
throw new Error('Params missing id.');
}
setScrollIntoViewId(id);
scrollerRef.current.setAttribute('scroll-into-view', id);
setScrollWithAnimation(animated);
setScrollAnimationDuration(duration);
}
Expand Down

0 comments on commit 4ee8f06

Please sign in to comment.