недавнийPCВ этом требовании есть небольшой нюанс.Внизу страницы есть область списка.Объем данных в этом списке относительно велик, и требуется управление пейджингом.При переключении номеров страниц отправлятьajaxЗапрос, в случае отсутствия обновления страницы, реализует обновление данных списка, поэтому он включает в себя функцию разбиения на страницы. слишком сложны в использовании Либо немного сложно начать, поэтому я подумал, что это не должно быть слишком сложно, я могу написать это сам.
Этот тип пейджинговой функции обычно очень распространен, но очень немногие нуждаются в том, чтобы сделать это самостоятельно, поэтому я остаюсь на том уровне, на котором я знаю, что это должно иметь место, но на самом деле я никогда не исследовал его. что это должно включать в себя некоторые логические суждения не должно быть трудно осознать.Однако, когда вы действительно начнете это осознавать, вы узнаете, что значит быть красивым.
основное введение
Сначала о рендерах:
чем-то похож наGithubВ нижней части страницы результатов поиска есть несколько страниц, некоторые логики могут немного отличаться, но в целом они должны быть схожими.
использование кодаES6синтаксис, этот плагин на самом делеclass,babelСовместимость с упаковкойIE9, нативный js не имеет зависимостей.
Весь код класса плагинаSimplePaginationДобавить пустой комментарий строки или что-то200Строки или около того, но часть кода является вспомогательным кодом, таким как инициализация, селекторы, добавление и удаление классов и т. д., а затем удаление комментариев пустой строки, последний оставшийся основной код будет меньше100Линия похожа.
Основная логика сужденияgotoPageВ этом методе, поскольку необходимо рассматривать различные ситуации, в нем записывается много информации.if.. else...Суждение, прежде чем писать эти коды, я думаю, что это почти то же самое, что и несколько суждений в лучшем случае, но я не ожидал, что их будет так много.Каждый переключатель номера страницы соответствует другой ветке суждения, что более громоздко.
Краткий анализ основного кода
Основным методом являетсяgotoPage, на первый взгляд, в этом методе полноif...else..Судя по всему запустить невозможно, но как бы ни менялся номер страницы, и как бы вы ни переключались на определенный номер страницы, вам нужно помнить только одно, то есть при переходе на определенный номер страницы состояние всего компонента пейджинга, соответствующего этому номеру страницы,КонечноДа, этот момент очень важен, пока этот момент понят, эта серияif...else...Смысл суда на самом деле ясен.
Самый внешний из этого методаif...else...Решение основано на том, должен ли номер страницы отображать заполнитель с многоточием.Если общее количество номеров страниц меньше, чем количество страниц, одновременно существующих в классе, то заполнитель с многоточием не нужен, который представляет собой относительно простую разбивку на страницы, например следующую:
В этом случае вам нужно только изменить номер страницы при переключенииactiveномер страницы.
Что касается другой ситуации, требующей, чтобы многоточие заняло место, то это сложное место, и в этой ветви самый внешний слой имеет3суждение, это3Это решение включает все случаи переключения номеров страниц.
Первое суждение относится к случаю, когда заполнитель с многоточием не должен появляться в левой части компонента подкачки, например:
Второе решение для случая, когда заполнитель ELLIPSIS не должен появляться в правой части компонента пейджинга, такого как следующее:
Третье суждение относится к случаю, когда заполнители с многоточием должны появляться с обеих сторон компонента подкачки, например:
Все состояния всего компонента пейджинга должны быть включены в эти три состояния, поэтому следующее логическое суждение должно быть сосредоточено только на этих трех состояниях.
Применение
первыйnewэтот класс, а затем вызовитеinitможно передать соответствующие параметры, например:
const slp = new SimplePagination(12)
slp.init({
container: '.box',
maxShowBtnCount: 3,
onPageChange: state => {console.log('pagination change:', state.pageNumber)}
})
Среди них, вnewсоздавать экземплярSimplePaginationкласс, вам нужно пройти в1параметры, общее количество страниц (totalPageCount), плагин пейджинга должен отрисовывать элемент номера страницы в соответствии с этим значением.
передачаinitПри вызове метода для удобства передачи параметров этот метод получает объект, а в объекте существуют следующие свойства:
| имя параметра | Типы | default |
иллюстрировать | Требуется ли |
|---|---|---|---|---|
container |
string |
body |
ОдинDOMселектор элементов,idилиclassМожет использоваться для представления контейнера для подкачки |
нет |
maxShowBtnCount |
number |
5 |
За исключением двух фиксированных кнопок в начале и в конце, посередине отображается не более нескольких кнопок с номерами страниц. | нет |
pCName |
string |
page-li |
Единое имя класса для всех элементов номера страницы разбиения на страницы, включая предыдущую страницу и следующую страницу. | нет |
activeCName |
string |
page-active |
Имя класса добавляется при выборе номера страницыclass
|
нет |
dataNumberAttr |
string |
Атрибут элемента page-number, значением которого является номер страницы, представленный элементом page-number. | data-number |
нет |
prevCName |
string |
page-prev |
Предыдущее имя класса кнопкиclass
|
нет |
nextCName |
string |
page-next |
Имя класса следующей кнопкиclass
|
нет |
disbalePrevCName |
string |
no-prev |
Имя класса для добавления к предыдущей кнопке, когда ее доступность отключена.class
|
нет |
disbaleNextCName |
string |
no-next |
Имя класса для добавления к следующей кнопке, когда ее доступность отключена.class
|
нет |
pageNumberCName |
string |
page-number |
Все элементы нумерации страниц, кроме кнопок предыдущей страницы, следующей страницы и многоточия-заполнителя, не включены. Единое имя класса | нет |
swEvent |
string |
click |
Инициировать событие для переключения страниц | нет |
onPageChange |
string |
- | Функция обратного вызова при переключении номера страницы | нет |
В дополнение к переключению номера страницы в соответствии с номером страницы на странице и кнопками предыдущей страницы и следующей страницы, плагин также имеетgotoPageметод доступен, этот метод получает типnumberпараметр, вызов этого метода приведет к переходу на номер страницы, указанный в этом параметре, например, переход на номер страницы9начальство:
slp.gotoPage(9)
Если переданный параметр не является допустимым номером страницы, ничего не будет сделано.
Исполняемый пример кода для этой статьи был помещен вGithubГотово, если интересно, можете посмотреть~
SimplePaginationЭтот класс в основном заключается в логическом суждении о переключении номеров страниц, а также простой сборкеDOMСтруктура, я написал случайный стиль в примере кода, если вам не нравится этот стиль, вы можете полностью переписать его самостоятельно.