国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

簡單的分頁組件(react)

Michael_Lin / 1132人閱讀

摘要：簡單的分頁組件由于工作原因?qū)戇^一段現(xiàn)在入手自己是戰(zhàn)五渣選手，為了鞏固之前學(xué)過的，特意用來實現(xiàn)，其實想用。判斷是不是數(shù)字點擊回調(diào)事件父組件回調(diào)事件給不同的元素賦值初始檢查階段判斷地址

簡單的分頁組件
...由于工作原因, 寫過一段vue, 現(xiàn)在入手jquery.自己是戰(zhàn)五渣選手，為了鞏固之前學(xué)過的react，特意用react來實現(xiàn)，其實想用jquery。 github L6zt
代碼效果如圖:

思路：
組件基本屬性:
cur 當(dāng)前頁碼，
all 總頁碼
space 頁面顯示數(shù)量 +1 才是 總數(shù)量
組件整體狀態(tài)

1、與首頁相連, cur < space 基本滿足
2、中間狀態(tài)，cur > space && cur < all - space
3、與末尾相連,cur > all - space
react 基本操作
子組件Pagination 通過 props 更新狀態(tài), 和state無關(guān)。
show code

// 判斷 是不是數(shù)字
const isNumber = (num) => {
    return typeof num === "number";
}
class Pagination extends  React.Component {
    constructor (props) {
        super(props);
    }
    // 點擊回調(diào)事件    
    handleClick (item) {
      // 父組件回調(diào)事件
      this.props.cb(item);
    }
    render () {
        let {cur, space, all} = this.props;
        let pgObj = [];
        // 給不同的元素 賦值class
        const checkClass = (role, active) => {
            const defaultClass = "pg-span";
            if (active) {
                return    `${defaultClass} active`
            }
            switch (role) {
                case 0: {
                    return `${defaultClass}`
                }
                case 1: {
                    return `${defaultClass}`
                }
                default: {
                
                }
            }
        }
        // 初始檢查
        if (all < space) {
            all =  space
        }
        if (cur <= 0) {
            cur = 0
        }
        if (cur >= all) {
        cur = all
        } 
        // 階段判斷
        if (cur < space) {
            if (space === all) {
                for (let i = 1; i <= space; i++) {
                    pgObj.push({
                        page: i,
                        role: 0,
                        key: i
                    })
                }
            } else {
                for (let i = 1; i <= space; i ++) {
                    pgObj.push({
                        page: i,
                        role: 0,
                        key: i
                    })
                }
                pgObj.push({
                    page: "...",
                    role: 1,
                    key: "next"
                })
                pgObj.push({
                    page: all,
                    role: 0,
                    key: all
                })
            }
        } else if (cur >= space && cur <= all - space + 1) {
            let odd = parseInt(space / 2);
            pgObj.push({
                page: 1,
                role: 0,
                key: 1
            });
            pgObj.push({
                page: "...",
                role: 1,
                key: "pre"
            });
            for (let i = cur - odd; i <= cur + odd ; i ++) {
                pgObj.push({
                    page: i,
                    role: 1,
                    key: i
                })
            }
            pgObj.push({
                page: "...",
                role: 1,
                key: "next"
            });
            pgObj.push({
                page: all,
                role: 1,
                key: all
            })
        } else {
            pgObj.push({
                page: 1,
                role: 0,
                key: 1
            });
            pgObj.push({
                page: "...",
                role: 1,
                key: "pre"
            });
            for (let i = all - space + 1; i <= all; i ++) {
                pgObj.push({
                    page: i,
                    role: 0,
                    key: i
                })
            };
        }
        return (
            

                {
                    pgObj.map(item =>
                        ( {this.handleClick(item)}}
                        >
                        {item.page}
                        ))
                }
            

        )
    }
    
}
class Root extends React.Component {
  constructor (props) {
      super(props);
      this.state = {
        cur: 1
      };
      this.handlePagination = this.handlePagination.bind(this);
  }
  handlePagination (item) {
      const {page} = item;
      if (isNumber(page)) {
          this.setState({
              cur: page
          })
      }
  }
  render() {
    let {cur} = this.state;
    console.log(cur);
    return  (
      

         
      

    )
  }
};
ReactDOM.render(
  ,
  document.getElementById("root")
);

demo地址

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/97269.html

相關(guān)文章

  • Graphql實踐——像axios一樣使用Graphql

    摘要：初始化項目使用初始化項目安裝項目結(jié)構(gòu)如下接口所有接口對封裝接下來對進(jìn)行封裝，加上中間件實現(xiàn)類似于攔截器的效果。 Graphql嘗鮮 在只學(xué)習(xí)graphql client端知識的過程中，我們常常需要一個graphql ide來提示graphql語法，以及實現(xiàn)graphql的server端來進(jìn)行練手。graphql社區(qū)提供了graphiql讓我們使用 graphiql (npm)：一個交互...

    mumumu 評論0 收藏0

  • jq easyui數(shù)據(jù)網(wǎng)絡(luò)的分頁過程

    摘要：在涉及到組件的分頁功能時，遇到了一點問題。由于數(shù)據(jù)較多，這邊不予展示。返回的數(shù)據(jù)必須是符合要求的數(shù)據(jù)，格式如下必須帶有屬性，屬性值為總共的數(shù)據(jù)條數(shù)，是這一頁的數(shù)據(jù)內(nèi)容，以數(shù)組對象的形式返回。 第一次寫技術(shù)方面的文章，有點忐忑，總怕自己講的不對誤導(dǎo)別人。但是萬事總有個開頭，有不足錯誤之處，請各位讀者老爺指出。 言歸正傳，最近剛進(jìn)新公司，上頭要求我先熟悉熟悉easyui這個組件庫。在涉及到...

    Rainie 評論0 收藏0

  • jq easyui數(shù)據(jù)網(wǎng)絡(luò)的分頁過程

    摘要：在涉及到組件的分頁功能時，遇到了一點問題。由于數(shù)據(jù)較多，這邊不予展示。返回的數(shù)據(jù)必須是符合要求的數(shù)據(jù)，格式如下必須帶有屬性，屬性值為總共的數(shù)據(jù)條數(shù)，是這一頁的數(shù)據(jù)內(nèi)容，以數(shù)組對象的形式返回。 第一次寫技術(shù)方面的文章，有點忐忑，總怕自己講的不對誤導(dǎo)別人。但是萬事總有個開頭，有不足錯誤之處，請各位讀者老爺指出。 言歸正傳，最近剛進(jìn)新公司，上頭要求我先熟悉熟悉easyui這個組件庫。在涉及到...

    array_huang 評論0 收藏0

  • 關(guān)于vue+element-ui項目的分頁，返回默認(rèn)顯示第一頁的問題解決

    摘要：所以這就導(dǎo)致，頁面內(nèi)容正確，但是頁碼高亮依舊是第一頁解決辦法我們需要在之后刷新這個分頁組件或者讓分頁組件的后于之后加載到頁面。然后再次測試，發(fā)現(xiàn)完美解決問題。 問題描述 當(dāng)前頁面如下showImg(https://segmentfault.com/img/bVbjJ7a); 然后點擊頁碼跳到第3頁，然后在第三頁點擊頁面鏈接跳轉(zhuǎn)到新的頁面showImg(https://segmentfa...

    YFan 評論0 收藏0

  • 基于jQuery封裝的分頁組件（可自定義設(shè)置）

    摘要：封裝的分頁組件前幾天做了一個的組件分頁，而現(xiàn)在需求是的分頁，我就根據(jù)我自己的需求寫了一個。在網(wǎng)上找了很久的基于的分頁封裝，可是都不是我想要的結(jié)果，那么今天我就給大家看一下我的這個分頁。 jQuery封裝的分頁組件 前幾天做了一個vue的組件分頁，而現(xiàn)在需求是jquery的分頁，我就根據(jù)我自己的需求寫了一個。在網(wǎng)上找了很久的基于jquery的分頁封裝，可是都不是我想要的結(jié)果，那么今天我就...

    lmxdawn 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<