Плагин полноэкранного скольжения на основе React

React.js
На npm уже есть react-fullpage, но его реализация заключается в использовании якорей, и после переобновления будут баги.

Так что я сделал колесо сам Добро пожаловать в использование, звезда, вопросы


адрес гитхаба:GitHub.com/dog X God/Преимущества… 


Я не был в моем Github более года. . Я не ожидал, что этот плагин будет использоваться некоторыми людьми. Некоторые люди дали звездам и поднятыми вопросами. Я решил все проблемы в вопросах. . Мы будем активно обновлять этот плагин в будущем, добро пожаловать его! Давайте найдем ошибки вместе!


2019.09.06 Обновление

  • Обновление всех идей, рефакторинг кода
  • решитьissues #3
  • Демо-код отделен от кода плагина, и сейчас не будет сообщено об ошибке.


2018.07.29 обновление

  • Новые параметры навигации стрелки, нажмите на стрелку на следующую страницу

2018.07.25 обновление

  • Добавлен параметр для изменения направления скольжения, которое можно изменить на вертикальное или горизонтальное;
  • Добавлены параметры для точки навигации для добавления пользовательских изображений.

использовать

Плагин был загружен в npm.

  • скачать

npm install react-fullslip

  • представлять

import {FullSlip,SlipItem} from "react-fullslip";

  • использовать

render() {
  let options = {
    navigation: true,//是否开启导航点,默认为true
    activeClass: 'active',自定义导航点类名,默认为active,.navigation-dot下的.active
    duration:1000,//屏幕滑动切换的时间,默认为1000
    transverse:true,//是否更改为横向滑动,默认为false
    navImage:[require('./assets/1.jpg'),require('./assets/2.jpg'),require('./assets/3.jpg')]//导航点图片,可选,默认无图片
    arrowNav:true, //是否开启箭头导航 默认false不开启
  };
  return (
    <div className="App">
      <FullSlip {...options}>
        <SlipItem style={{backgroundColor:'#C6E2FF'}}>
          page1
        </SlipItem>
        <SlipItem style={{backgroundColor:'#C1FFC1'}}>
          page2
        </SlipItem>
        <SlipItem style={{backgroundColor:'#FFEC8B'}}>
          page3
        </SlipItem>
      </FullSlip>
    </div>
  );
}


Требования: полноэкранная прокрутка, полоса прокрутки не требуется

Здесь я определяю два компонента, FullSlip и SlipItem, которые оборачивают SlipItem с помощью FullSlip и завершают страницу внутри SlipItem.


FullSlip

компонент полноэкранного прокручиваемого контейнера

Поскольку было внесено много изменений, добро пожаловать, чтобы проверить этоисходный код


css

Чтобы не отображать полноэкранную полосу прокрутки, он обрабатывается в CSS

//隐藏滚动条
html {
  overflow: -moz-scrollbars-none; //firefox
  -ms-overflow-style: none; //ie
}
html::-webkit-scrollbar { /*webkit内核*/
  display: none;
}


SlipItem

Простой компонент контейнера страниц, где вы можете писать страницы


предварительный просмотр


конец

Я не ожидала, что мелочи, которые я написал вместе со мной, тоже будут замечены, и я не могла не плакать.





Категории