Question

我正在将应用程序中的搜索结果显示为无序列表。当有5个搜索结果时，这种方法很好用，但是当我开始获得10-20个结果时，列表在页面下方开始越来越多。我想避免只在整个网页中向下滚动即可看到列表中较低的内容。有没有类似滚动视图的视图，可以在其中定义一定的高度，然后用户可以在容器内部滚动？

我当前的代码：

class SearchResults extends Component {
    render() {
        return (
            <div style={styles.wrapperDiv}>
                <div style={styles.resultsLeft}>
                    <ul style = {{ listStyleType: "none" }}>
                        <Result results={this.props.results}/>
                    </ul>
                </div>
                <div style={styles.mapRight}>
                    <GoogleMap/>
                </div>
            </div>
        );
    }
}

Answer 1

您可以尝试将父容器（wrapperDiv）的高度设置为500px，并将overflow-y设置为scroll：

<div styles={{ height: '500px', overflowY: 'scroll' }} style={styles.wrapperDiv}>
  ...
</div>

Answer 2

尝试此操作以在reactJs上滚动查看 https://www.npmjs.com/package/@cantonjs/react-scroll-view

像React JS中的“ ScrollView”组件？

2 个答案: