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

xiao芝麻2025-03-05 10:41

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

实现思路如下：

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