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.

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

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.

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

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>

回答1:

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

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

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,
      });
    }
  };

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

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)}

Inside the handler

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

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

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

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
  });

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
  });

Updated demo link

来源：https://stackoverflow.com/questions/58198920/how-to-show-the-index-and-end-of-the-flatlist-by-15-items-on-every-click

标签

react-native

react-native-flatlist