如何在每次点击时按 15 个项目显示 Flatlist 的索引和结尾 [英] How to show the index and end of the Flatlist by 15 items on every click

问题描述

我需要在单击向上和向下按钮时显示列表的索引和底部.

I need to show the index and bottom of the list while click on the up and down button.

如果我单击向上或向下箭头，是否可以选择仅向上或向下显示 15 个项目.

Is any option to show only 15 items up or down If I click on the up or down arrow.

例如)考虑一个包含 500 个项目的列表.它有一个上下箭头.如果我第一次点击向下箭头，我只需要显示 15 个项目，如果接下来点击向下箭头需要显示接下来的 15 个项目.

For Eg) Consider a list has 500 items. It has an up and down arrow. If I click on the down arrow once I need to show only 15 items for the first time and If click on the down arrow next need to show the next 15 items.

另外，如果我点击向上箭头，它需要显示 15 个以上的项目，而不是全部

Also If I click on the up arrow it needs to show 15 items above not all

在这个用例中，我需要在屏幕上上下移动.任何修改 Flatlist 中的 scrollToIndex 和 scrollToEnd 以实现此用例的选项

In this usecase I need to move up and down of the screen. Any option to modify the scrollToIndex and scrollToEnd in Flatlist to achieve this use case

   upButtonHandler = () => {
        //OnCLick of Up button we scrolled the list to top
        this.ListView_Ref.scrollToOffset({ offset: 0,  animated: true });
      };

   downButtonHandler = () => {
    //OnCLick of down button we scrolled the list to bottom
     this.ListView_Ref.scrollToEnd({ animated: true });
    };

 <TouchableOpacity
    activeOpacity={0.5}
      onPress={this.downButtonHandler}
      style={styles.downButton}>
      <Image
        source={{uri:'https://raw.githubusercontent.com/AboutReact/sampleresource/master/arrow_down.png',
        }}
        style={styles.downButtonImage}
      />
    </TouchableOpacity>
    <TouchableOpacity
      activeOpacity={0.5}
      onPress={this.upButtonHandler}
      style={styles.upButton}>
      <Image
        source={{uri:'https://raw.githubusercontent.com/AboutReact/sampleresource/master/arrow_up.png',
        }}
        style={styles.upButtonImage}
      />
    </TouchableOpacity>

推荐答案

您可以在每次按下按钮时切片提供给 FlatList 的数据.作为 FlatList是一个纯组件，您需要传递一个 extra 道具以在按下按钮后重新呈现 FlatList

You can slice the data provided to the FlatList every time a button is pressed.As the FlatList is a pure Component you need to pass a extra prop to re render the FlatList after button is pressed

维护一个状态变量，例如描述要显示哪一部分数据的部分，如 (0,15),(15,30),...

Maintain a state variable such as section which describes which part of data to display like (0,15),(15,30),...

在向上和向下按钮内更新这个变量，注意边界以免得到不好的结果.这可以通过将 setState 包装在 if 条件中轻松解决，因此它看起来大致如下

Update this variable inside the up and down buttons,taking care of the boundaries so as not to get bad results.This is easily solved by wrapping setState inside a if condition so it will look roughly as

updateSectionLow = () => {
    const { section } = this.state;
    if (section > 0) {
      this.setState({
        section: section - 1,
      });
    }
  };
  updateSectionHigh = () => {
    const { section, data } = this.state;
    if (data.length > (section + 1) * 15) {
      this.setState({
        section: section + 1,
      });
    }
  };

并且 FlatList 看起来像这样

and the FlatList looks like this

<FlatList
   data={this.state.data.slice(this.state.section*15,(this.state.section+1)*15)}
   renderItem={({ item }) => {
            return (
              <View style={styles.row}>
                <Text>{item.data}</Text>
              </View>
            );
   }}
   extraData={this.state.section}
/>

这是一个有效的博览会 演示

Here is a working expo demo

编辑与 OP 人员讨论后，我对代码进行了一些更改.

EDIT After having discussion with the OP person,i have changed my code little bit.

获取滚动后的偏移量，对于垂直列表

Get the offset after scroll, for a vertical list

onMomentumScrollEnd={e => this.scroll(e.nativeEvent.contentOffset)}

处理程序内部

this.setState({
  index: Math.floor(offset.y / (ITEM_HEIGHT+SEPARATOR_HEIGHT)),
});

如果没有分隔符那么你可以把SEPARATOR_HEIGHT设为0

if there is no separator then you can put SEPARATOR_HEIGHT to be 0

并且仅将 scrollToOffset 与 ref 一起使用，如下所示

and it is only matter of using scrollToOffset with ref as follows

通过ITEMS_DISP(如15)在列表中下降

for going down the list by ITEMS_DISP(like 15)

this.flatListRef.scrollToOffset({
    offset:(this.state.index+ITEMS_DISP)*ITEM_HEIGHT+(this.state.index+ITEMS_DISP)*SEPARATOR_HEIGHT
  });

因为某些 ITEMS_DISP 位居榜首

for going top the list by some ITEMS_DISP

this.flatListRef.scrollToOffset({
    offset:(this.state.index-ITEMS_DISP)*ITEM_HEIGHT+(this.state.index-ITEMS_DISP)*SEPARATOR_HEIGHT
  });

更新演示 link

这篇关于如何在每次点击时按 15 个项目显示 Flatlist 的索引和结尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！