ReactNative实现滑一点点内容区块指示器也滑一点点

效果图如上，内容滑一点点，指示器也按比例话一点点，列表宽度跟数据有关。

实现思路如下：

1.监听列表滑动事件，获取列表横向滑动距离，假设为A；

2.获取列表的宽度，及列表可滑动的宽度，假设为B；

3.获取指示器宽度，及指示器可滑动的宽度；假设为C；

4.计算指示器滑动距离，假设为X；

5.根据 滑动距离/列表可滑宽度 = 滑动距离/指示器可滑宽度，得出A/B=X/C，

所以X= A/B * C，把ABC数据带进来，即可算出指示器滑动距离，并设置给指示器item的左间距。

代码实现如下：UI样式如下

<View> <FlatList horizontal={true} showsHorizontalScrollIndicator={false} data={tripData} renderItem={({item, index, separators}) => this.renderItem(item, index, length)} keyExtractor={(item, index) => index.toString()} renderScrollComponent={props => (<ScrollView {...props} />)} getItemLayout={(data, index) => ({length: this.vItemWidth, offset: (this.vItemWidth + 5) * index, index})} onTouchStart={(e) => this.scrollEnable(false)} onTouchCancel={(e) => this.scrollEnable(true)} onScroll={this.onScroll}/> {this.renderIndicator()} </View> renderIndicator() { return( <View style={styles.indicatorContainer}> <View ref={(view) => {this.indicatorView = view;}} style={[styles.indicatorItem]}/> </View>); }; scrollEnable(enable) { //处理一些滑动冲突事件 } renderItem(item, index, length) { //item的样式 }

滑动算法如下：

onScroll = (event) => { let nativeEvent = {...event.nativeEvent}; let offsetX = nativeEvent.contentOffset.x;//用户横向滑动距离 let indicatorWidth = styles.indicatorContainer.width;//指示器容器宽度 let indicatorItemWidth = styles.indicatorItem.width; //指示器宽度 let indicatorLeft = offsetX / this.slideWidth * (indicatorWidth - indicatorItemWidth); this.indicatorView.setNativeProps({ marginLeft: indicatorLeft }); }; //列表可滑距离=列表总宽度 - 单屏宽度 列表总宽度= item的宽度 * item的个数 + item间间距 * (item个数 - 1) + 左间距 + 有间距; 列表可滑距离 = 列表总宽度 - 单屏显示的宽度;