前端 自定义分页功能实现

js

let originalArray=[1,2,3,4,5,6,7,8,9,10]  //全部数据

let chunkedArray = ref([]);//处理后的数据

let cunarr = ref([]);//展示数据

let nums = ref(2);//每页展示个数

let num = ref(0);//获取数据对应索引

onMounted(() => {

进入页面时先对数据进行处理

  chunkedArray.value = chunkArray(originalArray.value, 2);

  cunarr.value = chunkedArray.value[0]

});

function chunkArray(array, chunkSize) {

  const result = [];

  for (let i = 0; i < array.length; i += chunkSize) {

    result.push(array.slice(i, i + chunkSize));

  }

  return result;

}(参数 array:全部数据 chunkSize:每页展示个数)//处理数据的函数

let forward = () => {

  if (num.value >= 4) {

    num.value = 4;

  } else {

    num.value += 1;

  }

  cunarr.value = chunkedArray.value[num.value];

};

//下一页

let end = () => {

  num.value = originalArray.value.length / 2 - 1;

  cunarr.value = chunkedArray.value[num.value];

};

//最后一页

let first = () => {

  num.value = 0;

  cunarr.value = chunkedArray.value[num.value];

};

//第一页

let back = () => {

  if (num.value <= 0) {

    num.value = 0;

  } else {

    num.value -= 1;

  }

  cunarr.value = chunkedArray.value[num.value];

};

//上一页

页面展示

html

第一个按钮 绑定first()

第一个按钮 绑定back()

第一个按钮 绑定forward()

第一个按钮 绑定end()

样式的话按自己的需要自定义设置