Skip to content
This repository has been archived by the owner on Mar 7, 2024. It is now read-only.

Commit

Permalink
fix(wechat): 修复 ScrollView 滚动过快抖动问题
Browse files Browse the repository at this point in the history
  • Loading branch information
dominicleo authored and Darmody committed Jun 8, 2020
1 parent b8dd1f5 commit 9f98a79
Show file tree
Hide file tree
Showing 3 changed files with 2 additions and 50 deletions.
11 changes: 0 additions & 11 deletions packages/remax-wechat/src/__tests__/components/ScrollView.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,4 @@ describe('ScrollView', () => {

expect(testRenderer.toJSON()).toMatchSnapshot();
});

it('handle scroll', () => {
const event = { detail: { scrollTop: 10 } };
const handleScroll = jest.fn(event => event);
const component = TestRenderer.create(<ScrollView onScroll={handleScroll} />);

const instance = component.root.findByType('scroll-view' as any);
instance.props.onScroll(event);

expect(handleScroll).toBeCalledWith(event);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ exports[`ScrollView render correctly 1`] = `
enableBackToTop={false}
enableFlex={false}
lowerThreshold={50}
onScroll={[Function]}
refresherBackground="#fff"
refresherDefaultStyle="black"
refresherEnabled={false}
Expand Down
40 changes: 2 additions & 38 deletions packages/remax-wechat/src/hostComponents/ScrollView/index.ts
Original file line number Diff line number Diff line change
@@ -1,40 +1,9 @@
import * as React from 'react';
import { createHostComponent } from '@remax/shared';
import { BaseProps } from '../../types/component';

const componentName = 'scroll-view';
export const ScrollView = createHostComponent<ScrollViewProps>('scroll-view');

const ScrollViewRender: React.ForwardRefRenderFunction<any, ScrollViewProps> = (props, ref) => {
const { children, scrollTop, onScroll, ...restProps } = props;
const [innerScrollTop, forceUpdateScrollTop] = React.useState(scrollTop);
const scrollTopRef = React.useRef(innerScrollTop);

function handleScroll(event: any) {
scrollTopRef.current = event?.detail?.scrollTop;

if (typeof onScroll === 'function') {
onScroll(event);
}
}

React.useEffect(() => {
scrollTopRef.current = scrollTop;
forceUpdateScrollTop(scrollTop);
}, [scrollTop]);

const scrollViewProps = {
...restProps,
onScroll: handleScroll,
scrollTop: scrollTopRef.current,
ref,
};

return React.createElement(componentName, scrollViewProps, children);
};

const RemaxScrollView = React.forwardRef(ScrollViewRender);

RemaxScrollView.defaultProps = {
ScrollView.defaultProps = {
upperThreshold: 50,
lowerThreshold: 50,
scrollX: false,
Expand All @@ -50,11 +19,6 @@ RemaxScrollView.defaultProps = {
refresherTriggered: false,
};

/**
* https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
*/
export const ScrollView = createHostComponent<ScrollViewProps>(componentName, RemaxScrollView);

export interface ScrollViewProps extends BaseProps {
/** (default: false) 允许横向滚动 1.0.0 */
scrollX?: boolean;
Expand Down

1 comment on commit 9f98a79

@vercel
Copy link

@vercel vercel bot commented on 9f98a79 Jun 8, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.