如何显示每个平面列表项目的索引号,以便在使用分页的前一个下一个按钮来回移动时,使其准确?

我在renderItem方法中添加了一个索引props 来实现同样的功能,但它适用于3页,我想为相同的创建一个单行或简短的逻辑.

我在每页显示20个项目与分页,因此增加20个在每页.

 let updatedindex = index + 1;
      <Item
            item={item}
            index={pageNo == '1' ? updatedindex : pageNo == '2' ? 20 + updatedindex : 40 + updatedindex}
            onPress={() => { }}
            isCompleted={completedItems.includes(item._id)}
            backgroundColor={backgroundColor}
            textColor={color}
          />
    

其他一切都工作正常,只是我想包括索引与我的列表,如1,2,3 for each 项目.下面是我的下一个和上一个按钮分页的代码.

  const paginationNext = () => {
    if (currentPage * limit < parseInt(total)) {
      setCurrentPage(currentPage + 1);
      setHidePrev(true);

      let reqData = {
        Id: sId,
        pageSize: 20,
        pageNo: currentPage + 1,
      };
      getListingDataPagination(reqData);
    }
  };

  const paginationPrevious = () => {
    if (currentPage * limit < parseInt(total)) {
      setCurrentPage(currentPage - 1);
      let reqData = {
        Id: sId,
        pageSize: 20,
        pageNo: currentPage - 1,
      };

      getListingDataPagination(reqData);
    }
  };

推荐答案

当您写出页面和页面边界时,您可以观察到页面的最小和最大边界使用mathematical induction的模式.

page number page bounds
1 [1, 20] = [20 * 0, 20 * 0 + 20]
2 [21, 40] = [20 * 1, 20 * 1 + 20]
3 [41, 60] = [20 * 2, 20 * 2 + 20]
4 [61, 80] = [20 * 3, 20 * 3 + 20]
5 [81, 100] = [20 * 4, 20 * 4 + 20]
6 [101, 120] = [20 * 5, 20 * 5 + 20]

从表中,给定页面大小S和页面编号N,页面的边界可以表示为:

minbound maxbound
S * (N - 1) S * (N -1) + S

作为这种概括的结果,您可以实现一个函数,该函数返回给定项索引和页面大小的页面的索引.

const PAGE_SIZE = 20;

function getIndexOfPageItem(idx, pageno) {
  // pre-condition: provided index must be zero-based index and less than page size
  if (idx < 0 || idx > PAGE_SIZE - 1) {
    console.error(`index should be between range of 0 and ${PAGE_SIZE}`);
    return;
  }
  const minBound = PAGE_SIZE * (pageno - 1);
  const indexOfPageItem = minBound + (idx + 1);
  const maxBound = minBound + PAGE_SIZE;

  // post-condition: computed page index must be within range of page bounds.
  if (indexOfPageItem < minBound || indexOfPageItem > maxBound) {
    console.error(`index of page item is out of bounds, minBound=${minBound},maxBound=${maxBound},indexOfPageItem=${indexOfPageItem}`);
    return;
  }
  return indexOfPageItem;
}

function test(idx, pageno, expectedPageno) {
  console.assert(
    getIndexOfPageItem(idx, pageno),
    expectedPageno,
    `Expected pageno is ${expectedPageno} when item idx=${idx} and pageno=${pageno}`);
}

test(0, 1, 1);
test(19, 1, 20);
test(0, 2, 21);
test(19, 2, 40);
test(0, 3, 41);
test(19, 3, 60);
test(0, 4, 61);
test(19, 4, 80);
test(0, 5, 81);
test(19, 5, 100);
test(0, 6, 101);
test(19, 6, 120);

React-native相关问答推荐

如何在使用嵌套的堆栈导航器在选项卡之间导航后弹出到堆栈顶部?

ios 中节列表中的scrollToLocation 不起作用.在 Android 上,列表滚动回索引 0,但在 ios 上不会发生同样的情况

我们应该在 react-native 移动应用程序中使用哪个图标库

使用react native 杀死应用程序后蓝牙仍处于活动状态

ReactNative:在所有组件和操作之间共享 sqlite 实例的最佳方法

无法在 React Native iOS 模拟器中按 URI 显示图像

react-native 中的layout-only view removal优化是什么?

如何使用 AsyncStorage React Native 缓存 API 数据

使用 Hooks 在功能组件中react-navigation 标题

使用 react-native 设置 Select 器的高度

使用 Bearer身份验证令牌react native图像

如何在 React Native cli 中获取 SHA-1 密钥?

null 不是对象(判断 this.state.count)

使用 android 的应用中心分发时应用未安装错误

React Native如何将this.setState更改传递给父级

Tools > Android 菜单在 Android Studio 中不存在

如何在 Android 手机上运行 React Native 应用程序

Expo在使用Windows 10的android模拟器上运行

react-native iOS 应用在部署后不显示静态/本地资源

在 react-native 中使用捏拉zoom 的可滚动图像