1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/lydxwj-lydxwj-react-fullpage

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

@lydxwj/react-fullpage

Установка

npm install @lydxwj/react-fullpage --save

Использование

import { PageContainer, Pages } from '@lydxwj/react-fullpage';
import '@lydxwj/react-fullpage/lib/css/styles.css';

<PageContainer onChange={(nowIdx, newIdx) => {
  console.log(nowIdx);
  console.log(newIdx);
}} onChangeEnd={(nowIdx) => {
  console.log(nowIdx);
}}>
  <Pages style={{
    backgroundColor: '#51eabe',
  }}></Pages>
  <Pages style={{
    backgroundColor: '#f4ea2a',
  }}></Pages>
  <Pages style={{
    backgroundColor: '#1afa29',
  }}></Pages>
  <Pages style={{
    backgroundColor: '#1296db',
  }}></Pages>
</PageContainer>

Описание компонентов

import { PageContainer, Pages } from '@lydxwj/react-fullpage';
// PageContainer — контейнер для страниц, Pages — отдельная страница

// Либо импортировать так:
// import PageContainer from '@lydxwj/react-fullpage';
// PageContainer — контейнер для страниц, PageContainer.Pages — отдельная страница

Настройка компонентов

  • PageContainer
Параметр Описание Аргументы/Значение по умолчанию
onChange Вызов перед сменой страниц nowIdx (текущий индекс страницы), newIdx (индекс следующей страницы)
onChangeEnd Вызов после смены страниц nowIdx (текущий индекс страницы)
isArrow Отображение стрелки вниз true (значение по умолчанию)
isNav Отображение навигационной полосы true (значение по умолчанию)
style Объект стилей Настраиваемый объект стилей, рекомендовано не указывать высоту и ширину
// Usage of PageContainer which contains Pages inside it
```
  • Pages
Параметр Описание Аргументы/Значение по умолчанию
againCof Конфигурация повторного просмотра {isShow: true, messageText: 'Повторное просмотр'}
again Вызов при повторном просмотре нет
style Объект стилей Настроенный объект стилей, рекомендовано не указывать height и width
// Inside Pages you can place any page content
<Pages>
  <div>Содержимое страницы</div>
</Pages>

Примечание: Поддерживается только на мобильных устройствах.

Если возникли вопросы, просьба обращаться для обсуждения

Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Введение

Полноэкранный компонент для перелистывания страниц. Развернуть Свернуть
MIT
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/lydxwj-lydxwj-react-fullpage.git
git@api.gitlife.ru:oschina-mirror/lydxwj-lydxwj-react-fullpage.git
oschina-mirror
lydxwj-lydxwj-react-fullpage
lydxwj-lydxwj-react-fullpage
master