Состав пейджингового компонента
Без лишних слов, давайте сначала проанализируем структуру компонента пейджинга.На самом деле, этот анализ очень важен, более важен, чем реальное логическое суждение.Для начала посмотрим на картинку:
Мы можем видеть этот компонент пагинации:
《上一页》《下一页》 2 个 ： 2
《首页》《尾页》 2 个 ： 2
省略号 2 个 ： 2
当前页 1 个 ： 1
当前页左右各2个 ：2 * 2
Итак, этот компонент подкачки состоит из 2 + 2 + 2 + 1 + 2 * 2 = 11 элементов. Запомните это число и назовите эту переменную baseCount, которая будет повторно использоваться позже. Проанализировав, что эта логика действительно выполнена на 74%, вы удивлены? Но не волнуйтесь, давайте продолжим анализировать, какие параметры нужны компоненту пейджинга:
Я отметил параметры, и каждый должен знать значение этих параметров, поэтому я не буду их объяснять. Хорошо, вернемся к baseCount прямо сейчас, давайте посмотрим на взаимосвязь между baseCount и компонентными переменными и обнаружим, что она связана только с примерно: baseCount = 2 + 2 + 2 + 1 + 2 * вокруг. Здесь сделано 75%.
Как использовать baseCount
У нас есть очень простое значение: baseCount, но какая от него польза? На самом деле это очень важно, мы можем использовать это значение, чтобы определить, когда компонент нумерации страниц имеет многоточие. Например, в компоненте на рисунке выше, кроме кнопок «предыдущая» и «следующая» с обеих сторон, средняя часть имеет всего 11 — 2 = 9 элементов, то есть при общем количестве пейджинга Прогресс достиг 80%, продолжайте, когда появится многоточие? Что ж, это хороший вопрос, но нам лучше выяснить, что делает многоточие, прежде чем мы определим, когда оно появляется, что является вторым и самым важным пунктом этой статьи.
Роль многоточия
Сначала рассмотрим небольшую задачу: 1,...,3,4,5. Что обозначает многоточие? Представлять 2. Но достаточно использовать 2 непосредственно для многоточия здесь, потому что 2 само занимает позицию.Не является ли ненужным использование многоточия (на самом деле, многоточие только заменяет по крайней мере один элемент в реализации многих компонентов пейджинга, и это это не большая проблема). Таким образом, правильное использование многоточия должно быть таким: 1,...,4,5,6 (многоточие означает 2,3) или 6,7,8,...,12 (многоточие означает 9,10, 11). Поэтому я лично считаю, что роль многоточияЗамените минимум 2 элемента.
Затем посмотрите на позицию, где многоточие появляется в компоненте пейджинга.Как правило, есть три ситуации.Первый пример - это один, то есть многоточие появляется с обеих сторон, а два других следующие:
1. Появляется только сзади2. Появляется только спереди
Предварительным условием появления многоточия является total > baseCount -2, поскольку доступного места недостаточно для отображения всех страниц, поэтому его необходимо заменить многоточием.
А. Сначала определите ситуацию, которая появляется только сзади (многоточие вот-вот появится спереди), сначала определите, когда многоточие только появится впереди? В соответствии с ролью только что нарисованного многоточия, то есть он заменяет по крайней мере два элемента. Таким образом, мы берем это минимальное значение 2. В это время многоточие только что появилось впереди.
На данный момент элементы и числа перед cur следующие: домашняя страница (1) + минимальное значение многоточия (2) + левая сторона cur (вокруг), поэтому позиция cur = 1 + 2 + вокруг + 1, отметьте и назовитеstartPosition. Поэтому, когда cur
б) Следуя той же логике, мы также можем нарисовать критическую позицию, в которой многоточие появляется только спереди и не появляется сзади:endPosition= последняя страница (всего) - минимальное значение многоточия (2) - значение справа от cur (около) - 1. Только многоточие появляется впереди, когда cur > endPosition.
ок, логический анализ пройден на 95%, осталась еще одна ситуация, когда появляются эллипсы с обеих сторон, нам ее анализировать не нужно, за исключением двух ситуаций только что, то есть когдаstartPosition <= cur && cur <= endPosition.
Как показать другие местоположения
После анализа положения многоточия все остальное очень просто: запомните очень важный baseCount или используйте его. BaseCount, который мы только что получили, равен 11, потому что предыдущая и следующая страницы всегда будут существовать. Мы можем проигнорировать эти две позиции и просто посмотреть на 9 позиций, фактически используемых в середине.
Мы можем видеть, что когда многоточие появляется только после этого, последние две из доступных позиций должны быть... и всего. Итак, что осталось до многоточия9 - 2 = 7location, дайте этой переменной имяsurplus, просто отобразите его от 1 до Избыток. По той же причине, когда многоточие появляется только впереди, первые две позиции должны быть1 и .... Итак, следующие позиции взяты из(total-surplus)доtotal.
С обеих сторон есть эллипсы, первые два должны быть1 и ..., последние два должны быть... и всего. Затем середина – это кур и прилегающие к ней круги с левой и правой стороны.
Когда есть многоточие, эта логика гарантирует, что общее количество элементов, требуемых компонентом пейджинга, фиксировано, и оно связано только со значением вокруг, а рекомендуемое значение вокруг равно 2 или 3. На этом анализ логики пейджинга завершен, ниже приведен метод создания соответствующего массива компонентов пейджинга для справки:
/**
*
* @param {Number} total
* @param {Number} cur
* @param {Numbre} around
*/
const makePage = (total,cur,around) => {
let result = [];
let baseCount = around * 2 + 1 + 2 + 2 + 2; //总共元素个数
let surplus = baseCount - 4; //只出现一个省略号 剩余元素个数
let startPosition = 1 + 2 + around + 1;//前面出现省略号的临界点
let endPosition = total - 2 - around - 1;//后面出现省略号的临界点
if(total <= baseCount - 2){ //全部显示 不出现省略号
result = Array.from({length: total}, (v, i) => i + 1);
}else{ //需要出现省略号
if(cur < startPosition){ //1.只有后面出现省略号
result = [...Array.from({length: surplus}, (v, i) => i + 1),"...",total]
}else if(cur > endPosition) { //2.只有前边出现省略号
result = [1,'...',...Array.from({length: surplus}, (v, i) => total - surplus + i + 1)]
}else{ //3.两边都有省略号
result = [1,'...',...Array.from({length: around * 2 + 1}, (v, i) => cur - around + i),'...',total]
}
}
return result
}
makePage(8,2,2);//[1, 2, 3, 4, 5, 6, 7, 8]
makePage(20,3,2);//[1, 2, 3, 4, 5, 6, 7, "...", 20]
makePage(20,10,2);//[1, "...", 8, 9, 10, 11, 12, "...", 20]
makePage(20,19,2);//[1, "...", 14, 15, 16, 17, 18, 19, 20]
Суммировать
Вы можете использовать массив, сгенерированный этим методом, чтобы определить, какой контент отображает компонент пейджинга. Можно использовать React, vue или source js. Логика та же. Вы также можете перейти на какую страницу и отображать ли первую страницу и последнюю страницу в соответствии с вашими потребностями и другие связанные функции и логику.