React分页效果，导航样式可控

『荼』

已于 2022-04-27 11:13:50 修改

阅读量401

点赞数 3

CC 4.0 BY-SA版权

分类专栏： react 文章标签： javascript ajax react.js 前端

于 2021-07-20 19:31:53 首次发布

本文链接：https://blog.youkuaiyun.com/l_ymttt/article/details/118942628

该博客展示了如何在React项目中结合原生JavaScript创建分页效果，并提供了导航栏的代码示例和SCSS样式。作者通过调用PDD接口，演示了分页组件的实现，同时提醒读者需要安装axios库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是一个用react加原生js写的分页效果，前面loading动画大家可自行添加。具体先看效果图

接下来上代码:导航栏代码和scss代码。

import React, { Component } from 'react';

// 分页效果的导航部分

class Com extends React.Component {
    constructor(props) {
        super(props)
        let { defaultCurrent, total } = props;
        this.state = {
            currentPage: defaultCurrent, //当前页码
            groupCount: 5, //页码分组，显示7个页码，其余用省略号显示
            startPage: parseInt(defaultCurrent) - 2 > 0 ? parseInt(defaultCurrent) - 2 : parseInt(defaultCurrent), //分组开始页码
            totalPage: total //总页数
        }
    }
    componentDidMount() {
        const { defaultCurrent, } = this.props;
        const localCurrent = parseInt(sessionStorage.getItem('currentPage'));
        this.setState({
            currentPage: localCurrent || defaultCurrent,
            startPage: localCurrent - 2 > 0 ? localCurrent - 2 : localCurrent, //分组开始页码
        })

    }
    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 {

最低0.47元/天解锁文章