每个节标题都在顶部时，我想获得<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="">
</div>
<div class="carousel-item">
<video id="myVideo" muted><source src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
</div>
<div class="carousel-item">
<video id="myVideo2" muted><source src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
</div>
</div>
</div>位置值。
例如，y是我的标题，当A在顶部时，y值是A、B、C，B是100，C是500。
我的React本机项目版本为1200，因此我使用ListView实现了0.44.2。
这是我来自FaceBook源代码的SectionList代码：
ListView这是我关于'use strict';
var ListView = require('ListView');
var Dimensions = require('Dimensions');
var Platform = require('Platform');
var StyleSheet = require('StyleSheet');
var React = require('React');
var View = require('View');
type Rows = Array<Object>;
type RowsAndSections = {
[sectionID: string]: Object;
};
export type Data = Rows | RowsAndSections;
type RenderElement = () => ?ReactElement;
type Props = {
data: Data;
renderEmptyList?: ?RenderElement;
minContentHeight: number;
contentInset: { top: number; bottom: number; };
contentOffset: { x: number; y: number; };
};
type State = {
contentHeight: number;
dataSource: ListView.DataSource;
};
// FIXME: Android has a bug when scrolling ListView the view insertions
// will make it go reverse. Temporary fix - pre-render more rows
const LIST_VIEW_PAGE_SIZE = Platform.OS === 'android' ? 20 : 1;
class PureListView extends React.Component {
props: Props;
state: State;
static defaultProps = {
data: [],
contentInset: { top: 0, bottom: 0 },
contentOffset: { x: 0, y: 0 },
// TODO: This has to be scrollview height + fake header
minContentHeight: 0, //Dimensions.get('window').height,
// renderSeparator: (sectionID, rowID) => <View style={styles.separator} key={rowID} />,
};
constructor(props: Props) {
super(props);
let dataSource = new ListView.DataSource({
getRowData: (dataBlob, sid, rid) => dataBlob[sid][rid],
getSectionHeaderData: (dataBlob, sid) => dataBlob[sid],
rowHasChanged: (row1, row2) => row1 !== row2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
});
this.state = {
contentHeight: 0,
dataSource: cloneWithData(dataSource, props.data),
};
(this: any).renderFooter = this.renderFooter.bind(this);
(this: any).onContentSizeChange = this.onContentSizeChange.bind(this);
}
componentWillReceiveProps(nextProps: Props) {
if (this.props.data !== nextProps.data) {
this.setState({
dataSource: cloneWithData(this.state.dataSource, nextProps.data),
});
}
}
render() {
const {contentInset} = this.props;
const {contentOffset} = this.props;
// console.log('ESDebug:content offset');
// console.log(contentOffset);
const bottom = contentInset.bottom +
Math.max(0, this.props.minContentHeight - this.state.contentHeight);
var removeSubviews = false;
if (Platform.OS === 'android') {
removeSubviews = true;
}
return (
<ListView
initialListSize={5}
pageSize={LIST_VIEW_PAGE_SIZE}
{...this.props}
ref="listview"
dataSource={this.state.dataSource}
renderFooter={this.renderFooter}
contentInset={{bottom, top: contentInset.top}}
contentOffset={contentOffset}
onContentSizeChange={this.onContentSizeChange}
scrollEventThrottle={1000}
decelerationRate ={'normal'}
removeClippedSubviews={true}
/>
);
}
onContentSizeChange(contentWidth: number, contentHeight: number) {
if (contentHeight !== this.state.contentHeight) {
this.setState({contentHeight});
}
}
scrollTo(...args: Array<any>) {
this.refs.listview.scrollTo(...args);
}
getScrollResponder(): any {
return this.refs.listview.getScrollResponder();
}
renderFooter(): ?ReactElement {
if (this.state.dataSource.getRowCount() === 0) {
return this.props.renderEmptyList && this.props.renderEmptyList();
}
return this.props.renderFooter && this.props.renderFooter();
}
}
function cloneWithData(dataSource: ListView.DataSource, data: ?Data) {
if (!data) {
return dataSource.cloneWithRows([]);
}
if (Array.isArray(data)) {
return dataSource.cloneWithRows(data);
}
return dataSource.cloneWithRowsAndSections(data);
}
var styles = StyleSheet.create({
separator: {
backgroundColor: '#eeeeee',
height: 1,
},
});
module.exports = PureListView;
的组件代码：
ListView我从 var PureListView = require('../../common/PureListView');
render() {
return (
<PureListView
ref={(pureListView) => { this.pureListView = pureListView; }}
style = {{marginTop:0, backgroundColor:'white'}}
contentContainerStyle = {{flexDirection: 'row',flexWrap: 'wrap'}}
data= {this.state.sectionData}
renderEmptyList={this.renderEmptyList}
renderSectionHeader={this._renderSectionHeader}
onScroll={this._onScroll}
renderRow={this._renderRow}
navigator={this.props.navigator}
/>
);
}
函数获得y位置值，但是我不知道当A或B或C标头标题位于顶部时如何获取y位置值。
_onScroll任何帮助将不胜感激。
答案 0 :(得分：1)
您可以使用onLayout来获取A，B和C的初始y位置，例如在onScroll检查中，当滚动的y位置-A.y为0时，这将是当前标题位于顶部
这是方法：