Heim > Web-Frontend > js-Tutorial > Hauptteil

Implementieren Sie Paging-Komponenten mit React

亚连
Freigeben: 2018-06-06 15:21:00
Original
3444 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Versuch vorgestellt, mit React selbst eine Paging-Komponente zu schreiben (Zusammenfassung). Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Dieser Artikel stellt den Versuch vor, eine Paging-Komponente (Zusammenfassung) mit React selbst zu schreiben, und teilt sie mit allen. Die Details sind wie folgt:

Paging-Effekt

Online-Vorschau

Github-Adresse

Screenshot des Effekts (der Stil kann von Ihnen selbst geändert werden):

Projekt erstellen

create-react-app react-paging-component
Nach dem Login kopieren

Paging-Komponente

1. Unterkomponente

Pagecomponent.js-Datei erstellen

Kerncode:

Initialisierungswert

 constructor(props) {
    super(props)
    this.state = {
      currentPage: 1, //当前页码
      groupCount: 5, //页码分组,显示7个页码,其余用省略号显示
      startPage: 1, //分组开始页码
      totalPage:1 //总页数
    }
  }
Nach dem Login kopieren

Dynamische Generierung der Seitenzahlfunktion

createPage() {
    const {currentPage, groupCount, startPage,totalPage} = this.state;
    let pages = []
    //上一页
    pages.push(<li className={currentPage === 1 ? "nomore" : null} onClick={this.prePageHandeler.bind(this)}
            key={0}>
      上一页</li>)

    if (totalPage <= 10) {
      /*总页码小于等于10时,全部显示出来*/
      for (let i = 1; i <= totalPage; i++) {
        pages.push(<li key={i} onClick={this.pageClick.bind(this, i)}
                className={currentPage === i ? "activePage" : null}>{i}</li>)
      }
    } else {
      /*总页码大于10时,部分显示*/

      //第一页
      pages.push(<li className={currentPage === 1 ? "activePage" : null} key={1}
              onClick={this.pageClick.bind(this, 1)}>1</li>)

      let pageLength = 0;
      if (groupCount + startPage > totalPage) {
        pageLength = totalPage
      } else {
        pageLength = groupCount + startPage;
      }
      //前面省略号(当当前页码比分组的页码大时显示省略号)
      if (currentPage >= groupCount) {
        pages.push(<li className="" key={-1}>···</li>)
      }
      //非第一页和最后一页显示
      for (let i = startPage; i < pageLength; i++) {
        if (i <= totalPage - 1 && i > 1) {
          pages.push(<li className={currentPage === i ? "activePage" : null} key={i}
                  onClick={this.pageClick.bind(this, i)}>{i}</li>)
        }
      }
      //后面省略号
      if (totalPage - startPage >= groupCount + 1) {
        pages.push(<li className="" key={-2}>···</li>)
      }
      //最后一页
      pages.push(<li className={currentPage === totalPage ? "activePage" : null} key={totalPage}
              onClick={this.pageClick.bind(this, totalPage)}>{totalPage}</li>)
    }
    //下一页
    pages.push(<li className={currentPage === totalPage ? "nomore" : null}
            onClick={this.nextPageHandeler.bind(this)}
            key={totalPage + 1}>下一页</li>)
    return pages;

  }
Nach dem Login kopieren

Seitenzahl Klickfunktion:

//页码点击
  pageClick(currentPage) {
    const {groupCount} = this.state
    const getCurrentPage = this.props.pageCallbackFn;
    //当 当前页码 大于 分组的页码 时,使 当前页 前面 显示 两个页码
    if (currentPage >= groupCount) {
      this.setState({
        startPage: currentPage - 2,
      })
    }
    if (currentPage < groupCount) {
      this.setState({
        startPage: 1,
      })
    }
    //第一页时重新设置分组的起始页
    if (currentPage === 1) {
      this.setState({
        startPage: 1,
      })
    }
    this.setState({
      currentPage
    })
    //将当前页码返回父组件
    getCurrentPage(currentPage)
  }
Nach dem Login kopieren

Vorherige Seite und Xiaye-Klickereignisse

//上一页事件
  prePageHandeler() {
    let {currentPage} = this.state
    if (--currentPage === 0) {
      return false
    }
    this.pageClick(currentPage)
  }

  //下一页事件
  nextPageHandeler() {
    let {currentPage,totalPage} = this.state
    // const {totalPage} = this.props.pageConfig;
    if (++currentPage > totalPage) {
      return false
    }
    this.pageClick(currentPage)
  }
Nach dem Login kopieren

Die Komponente wird im DOM gerendert

render() {
    const pageList = this.createPage();
    return (
      <ul className="page-container">
        {pageList}
      </ul>
    )
  }
Nach dem Login kopieren

2. Übergeordnete Komponente

Erstellen Sie die Datei „Pagecontainer.js“

Der vollständige Code der übergeordneten Komponente

import React, {Component} from &#39;react&#39;
import Pagecomponent from &#39;../components/Pagecomponent&#39;
import data from &#39;../mock/tsconfig.json&#39;

class Pagecontainer extends Component {
  constructor() {
    super()
    this.state = {
      dataList:[],
      pageConfig: {
        totalPage: data.length //总页码
      }
    }
    this.getCurrentPage = this.getCurrentPage.bind(this)
  }
  getCurrentPage(currentPage) {
    this.setState({
      dataList:data[currentPage-1].name
    })
  }
  render() {
    return (
      <p>
        <p>
          {this.state.dataList}
        </p>
        <Pagecomponent pageConfig={this.state.pageConfig}
                pageCallbackFn={this.getCurrentPage}/>
      </p>

    )
  }
}
export default Pagecontainer
Nach dem Login kopieren

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Wie verwende ich Filter in der Vue2.0-Serie?

So kehren Sie über die Tween-Methode im Vue-Projekt nach oben zurück

So verwenden Sie Vue, um festzustellen, ob der Eingabeinhalt vollständig ist Leerzeichen?

Das obige ist der detaillierte Inhalt vonImplementieren Sie Paging-Komponenten mit React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage