首先附上我的效果图:
1.当前窗口大小,一共7个卡片,每页可以容纳3个卡片,总页数(Dots)为3:
2.当窗口缩小时,根据情况显示当前容纳个数,并且下方的Dots个数也根据页数更改,此时每页有2个卡片,总页数为4:
然后,说说最核心的思想:
最后附上代码:
index.js文件
import React from 'react'
import { Paper, Button } from 'react-md'
import PropTypes from 'prop-types'
import './style.scss'
export default class DashboardPagination extends React.PureComponent {
constructor (props) {
super(props)
this.container = React.createRef()
}
componentDidMount () {
const bigContainer = this.container.current
const ro = new ResizeObserver(entries => {
for (let entry of entries) {
this.setState({
bigContainerWidth: entry.contentRect.width
})
}
})
ro.observe(bigContainer)
}
state = {
currentDot: 0,
bigContainerWidth: 0
}