嘗試自己動手用react來寫一個分頁組件(小結)

本文介紹了嘗試自己動手用react來寫一個分頁組件(小結)，分享給大家，具體如下：

在烏海海南等地區，都構建了全面的區域性戰略布局，加強發展的系統性、市場前瞻性、產品創新能力，以專注、極致的服務理念，為客戶提供成都網站制作、做網站網站設計制作按需策劃,公司網站建設,企業網站建設,高端網站設計,網絡營銷推廣,外貿網站制作,烏海海南網站建設費用合理。

分頁效果

在線預覽

github地址

效果截圖（樣式可自行修改）：

嘗試自己動手用react來寫一個分頁組件(小結)

構建項目

create-react-app react-paging-component

分頁組件

1.子組件

創建 Pagecomponent.js 文件

核心代碼：

初始化值

 constructor(props) {
    super(props)
    this.state = {
      currentPage: 1, //當前頁碼
      groupCount: 5, //頁碼分組，顯示7個頁碼，其余用省略號顯示
      startPage: 1, //分組開始頁碼
      totalPage:1 //總頁數
    }
  }

動態生成頁碼函數

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;

  }

頁碼點擊函數:

//頁碼點擊
  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)
  }

上一頁和夏夜點擊事件

//上一頁事件
  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)
  }

組件渲染到DOM上

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

2.父組件

創建 Pagecontainer.js 文件

父組件完整代碼

import React, {Component} from 'react'
import Pagecomponent from '../components/Pagecomponent'
import data from '../mock/tsconfig.json'

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 (
      <div>
        <div>
          {this.state.dataList}
        </div>
        <Pagecomponent pageConfig={this.state.pageConfig}
                pageCallbackFn={this.getCurrentPage}/>
      </div>

    )
  }
}
export default Pagecontainer

至此一個分頁組件就開發完了，希望對大家的學習有所幫助，也希望大家多多支持創新互聯。

名稱欄目：嘗試自己動手用react來寫一個分頁組件(小結)
標題網址：http://vcdvsql.cn/article28/pdedjp.html

成都網站建設公司_創新互聯，為您提供品牌網站建設、關鍵詞優化、外貿網站建設、網站導航、網站改版、面包屑導航

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

嘗試自己動手用react來寫一個分頁組件(小結)