中华建设杂志网站用户界面设计案例

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

实现思路如下：

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

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

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

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

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

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

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

<View> <FlatListhorizontal={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}><Viewref={(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) + 左间距 + 有间距;
列表可滑距离 = 列表总宽度 - 单屏显示的宽度;