dva开发-分页组件

船长，我们去哪里啊，希板鸭还是伊塔厘。

前言

记录一下开发网易云写的分页组件（老板要求dva，第一次写dva，感觉和react-redux区别不大，但是目录结构清晰很多），直接贴代码了，很乱。emmm…反正只有自己看。

UI组件

/** UI params
 * @param curPage - current page
 * @param groupCount - page count between ellipsis
 * @param totalPage - psge count
 * @param startPage - page show between ellipsis
 */

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import './index.less';

const PaginationUI = ({ curPage, groupCount, totalPage, startPage = 6,
                      handlePageClick, prev, next,
                    }) => (

                      <div className="pagination">
                        <ul className="pagi-list">
                          <a
                            className={classnames({
                              "zbtn": true,
                              "prev": true,
                              "disable": curPage === 1
                            })}
                            onClick={prev}
                          >
                            上一页
                          </a>
                          <a
                            className={classnames({
                              "zpgi": true,
                              "js-selected": curPage === 1
                            })}
                            onClick={handlePageClick}
                          >
                            1
                          </a>
                          <span
                            className={classnames({
                              zdot: curPage < 6 && totalPage >= 9,
                            })}
                          >
                            ...
                          </span>
                          {
                            Array.from({length: groupCount}).map((item, index) => {
                              if(curPage < 6) {
                                return index + 2;
                              }else {
                                return index + startPage;
                              }

                            }).map(
                              (item, index) =>
                                (item < totalPage) && <a
                                  className={classnames({
                                    "zpgi": true,
                                    "js-selected": item === curPage
                                  })}
                                  onClick={handlePageClick}
                                >
                                  {item}
                                </a>
                              )
                          }
                          <span
                            className={classnames({
                              zdot: curPage > totalPage - groupCount && totalPage >= 9,
                            })}
                          >
                            ...
                          </span>
                          <a
                            className={classnames({
                              "zpgi": true,
                              "js-selected": curPage === totalPage
                            })}
                            onClick={handlePageClick}
                          >
                            {totalPage}
                          </a>
                          <a
                            className={classnames({
                              "zbtn": true,
                              "next": true,
                              "disable": curPage === totalPage
                            })}
                            onClick={next}
                          >
                            下一页
                          </a>
                        </ul>
                      </div>
                    );

PaginationUI.propTypes = {
  prev: PropTypes.func.isRequired,
  next: PropTypes.func.isRequired,
  handlePageClick: PropTypes.func.isRequired,
};

export default PaginationUI;

UI组件样式

.pagination {
  .zdot {
    display: none;
  }
  #a() {
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #ccc;
    margin: 0 3px 0 3px;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
  }
  #node(){/*去除双击选中文字*/
    -webkit-user-select: none;
    -moz-user-select:none;
    -o-user-select:none;
    -ms-user-select:none;
  }
  .js-selected {
    background: transparent url("../../../assets/button.png") no-repeat;
    border-color: #A2161B;
    color: #fff;
    cursor: default;
  }
  .zpgi {
    #a();
    #node();
    height: 22px;
    line-height: 22px;
    padding: 0 7px;
    &:hover:not(.js-selected) {
      border-color: #666;
      color: #333;
    }
  }
  .zbtn {
    #a();
    #node();
    width: 69px;
    height: 24px;
    line-height: 24px;
    color: #333;
    text-align: center;
    box-sizing: border-box;
    background: transparent url("../../../assets/button.png") no-repeat;
  }
  @padding-btn: 10px;
  .next {
    background-position: -75px -561px;
    padding-right: @padding-btn;
    &.disable {
      background-position: -75px -621px ;
      color: #CACACA;
    }
  }
  .prev {
    background-position: -2px -561px;
    padding-left: @padding-btn;
    &.disable {
      background-position: -1px -621px ;
      color: #CACACA;
    }
  }
}

下面是容器组件

这样开发真的舒服

import React from 'react';
import { connect } from 'dva';
import PaginationUI from '../paginationUI';

//es7修饰器@connect() - connect的语法糖，可以不用在connect里写dispatch。eject配置

const Pagination = ({ dispatch, SongList }) => {
  const { totalPage,
          groupCount,
          curPage,
          startPage, } = SongList;

  return (
    <div className="songlist-wrap">
      <PaginationUI
        totalPage={totalPage}
        groupCount={groupCount}
        curPage={curPage}
        startPage={startPage}
        handlePageClick={handlePageClick}
        prev={handlePrevClick}
        next={handleNextClick}
      />
    </div>
  );

  function handlePageClick(e) {

    dispatch({
      type: 'SongList/orientate-cur-page',
      curPage: parseInt(e.target.innerHTML),
    });
  }

  function handleNextClick(e) {
    if(curPage === groupCount + startPage - 1 && curPage !== totalPage) {
      dispatch({
        type: 'SongList/change-start-page',
        startPage: startPage + groupCount,
      });
    }
    if(curPage === totalPage - groupCount + 1) {
      dispatch({
        type: 'SongList/change-start-page',
        startPage: curPage,
      });
    }
    !(curPage === totalPage) && dispatch({
      type: 'SongList/next-page',
      curPage: curPage + 1,
    });
  }

  function handlePrevClick(e) {
    if(curPage === startPage) {
      dispatch({
        type: 'SongList/change-start-page',
        startPage: startPage - groupCount ,
      });
    }
    !(curPage === 1) && dispatch({
      type: 'SongList/prev-page',
      curPage: curPage - 1,
    });
  }
};

export default connect(({ SongList }) => ({
  SongList,
}))(Pagination);

model

export default {
  namespace: "SongList",
  state: {

  },
  reducers: {
    'orientate-cur-page'(state, { curPage }) {
      return {
        ...state,
        curPage,
      }
    },
    'next-page'(state, { curPage }) {
      return {
        ...state,
        curPage,
      }
    },
    'prev-page'(state, { curPage }) {
      return {
        ...state,
        curPage,
      }
    },
    'change-start-page'(state, { startPage }) {
      return {
        ...state,
        startPage,
      }
    }
  },
};

就这样吧。截止今天，点击的bug并没有解决（懒）。