目前正在做React開發(fā)工作俄精，也是第一次接觸這個(gè)語言询筏，以前接觸過Vue,React寫起來其實(shí)跟Vue差不多的，寫些基本的功能還是可以的竖慧。在本次項(xiàng)目開發(fā)中嫌套，設(shè)計(jì)師設(shè)計(jì)了一個(gè)查詢結(jié)果頁面以彈窗的樣式展現(xiàn)逆屡，當(dāng)結(jié)果條數(shù)過多的時(shí)候以分頁展示，這里設(shè)計(jì)師設(shè)計(jì)的是采用頁碼翻頁的踱讨，不是傳統(tǒng)的移動(dòng)端直接往上拉加載更多魏蔗。頁碼翻頁我認(rèn)為大部分會(huì)用在PC端，那么既然設(shè)計(jì)圖出來了痹筛，也是要實(shí)現(xiàn)的嘛沫勿。本著快捷開發(fā)的原則，我第一時(shí)間去React組件庫antd查找味混，希望找個(gè)差不多的可以直接用或者改造一下拿來用产雹，找是找到了，就是用的時(shí)候翁锡，這個(gè)翻頁組件在頁碼過多的時(shí)候蔓挖，前后有省略號狀態(tài)時(shí)，組件寬度會(huì)突然擴(kuò)張一下馆衔，這對于移動(dòng)端開發(fā)是很不友好的瘟判，它隨便擴(kuò)一下，我這里就直接超出視圖范圍了角溃，直接造成bug拷获，我嘗試去改變css樣式以便控制組件寬度，最好是固定寬度不動(dòng)减细，但調(diào)了一段時(shí)間匆瓜，發(fā)現(xiàn)沒能成功，畢竟是新手未蝌，我直接拋棄這個(gè)小辣雞驮吱，本人打算自己寫一個(gè)翻頁組件用用了。我要開始我的表演了萧吠，先大概說下我設(shè)計(jì)的這個(gè)組件左冬，兩端各有翻頁箭頭，點(diǎn)擊分別可實(shí)現(xiàn)向前向后翻一頁功能，頁碼數(shù)不大于8的時(shí)候，1-8頁居中全展示脱篙，供用戶點(diǎn)擊切換頁面；當(dāng)總頁數(shù)多余8的時(shí)候除破，完成初始化后，默認(rèn)選中第一頁,然后在倒數(shù)第二個(gè)小方塊顯示省略號癌别，最后一個(gè)方塊顯示最后一頁的頁碼皂岔，當(dāng)用戶點(diǎn)擊省略號的時(shí)候，控件會(huì)向后翻4頁展姐，此時(shí)第二個(gè)小方塊也會(huì)變成省略號以代表已經(jīng)翻過的不能顯示完全的頁碼躁垛，前后兩個(gè)省略號點(diǎn)擊分別可實(shí)現(xiàn)向前向后翻4頁的功能剖毯，至此總算是實(shí)現(xiàn)了我自己的需求，也符合設(shè)計(jì)師設(shè)計(jì)的樣式教馆⊙纺保可以來看下效果圖：
組件在用的時(shí)候只需要傳入總頁碼數(shù)和選中頁碼回調(diào)方法就可以了，這個(gè)組件我個(gè)人覺得在PC端也是可以用的土铺，樣式什么的胶滋，如果你要用的話也是可以隨便改，而且改起來也很容易悲敷。話不多說了究恤，是時(shí)候給出代碼鏈接了，如果有bug后德，請聯(lián)系我部宿，希望這個(gè)組件能幫到你。PageComponent
