首先我们需要创建一个umi项目
这里我们参考umi官方文档https://v3.umijs.org/zh-CN/docs/getting-started
然后我们需要在pages文件中创建book.tsx文件
然后接下来请欣赏我们的代码展示
import React, {
useState, useEffect } from 'react'
import {
NavBar, Space, Button, List, Collapse } from 'antd-mobile/es'
import {
useHistory } from 'umi';
export default function Bookshelf() {
const history = useHistory();
const [state, setstate] = useState(JSON.parse(localStorage.getItem('bookshelf')) || []);
const [state1, setstate1] = useState(JSON.parse(localStorage.getItem('bookshelf1')) || []);
const onRead = (item) => {
let list = JSON.parse(localStorage.getItem('bookshelf')) || []
let list1 = JSON.parse(localStorage.getItem('bookshelf1')) || []
list1.push(item)
list.shift()
localStorage.setItem('bookshelf', JSON.stringify(list));
localStorage.setItem('bookshelf1', JSON.stringify(list1));
setstate(list || [])
setstate1(list1 || [])
}
const onRead1 = (item) => {
let list = JSON.parse(localStorage.getItem('bookshelf')) || []
let list1 = JSON.parse(localStorage.getItem('bookshelf1')) || []
list.push(item)
list1.shift()
localStorage.setItem('bookshelf', JSON.stringify(list));
localStorage.setItem('bookshelf1', JSON.stringify(list1));
setstate(list || [])
setstate1(list1 || [])
}
const ondel = (index) => {
let list = JSON.parse(localStorage.getItem('bookshelf')) || []
list.shift()
localStorage.setItem('bookshelf', JSON.stringify(list));
setstate(list || [])
}
const ondel1 = (index) => {
let list1 = JSON.parse(localStorage.getItem('bookshelf1')) || []
list1.shift()
localStorage.setItem('bookshelf1', JSON.stringify(list1));
setstate1(list1 || [])
}
const back = () => {
history.goBack()
}
return (
<div>
<NavBar onBack={
back}
style={
{
'backgroundColor': 'blue' }}>
书架
</NavBar>
<Collapse defaultActiveKey={
['1']}>
<Collapse.Panel key='1' title='正在看'>
<List>
{
state.map((item, index) => {
return (
<List.Item key={
index} extra={
<Space style={
{
'--gap': '16px' }}>
<Button color='primary' onClick={
() => {
onRead(item)
}} size='small' fill='none'>
标记为已看完
</Button>
<Button onClick={
() => {
ondel(index)
}} color='primary' size='small' fill='none'>
删除
</Button>
</Space>
}>
{
item.name}
</List.Item>
)
})
}
</List>
</Collapse.Panel>
<Collapse.Panel key='2' title='已完结'>
<List>
{
state1.map((item, index) => {
return (
<List.Item key={
index} extra={
<Space style={
{
'--gap': '16px' }}>
<Button color='primary' onClick={
() => {
onRead1(item)
}} size='small' fill='none'>
再看一遍
</Button>
<Button
onClick={
() => {
ondel1(index)
}} color='primary' size='small' fill='none'>
删除
</Button>
</Space>
}>{
item.name}</List.Item>
)
})
}
</List>
</Collapse.Panel>
</Collapse>
</div>
)
}
**这里我们接上篇文章**https://blog.csdn.net/qq_53509791/article/details/129113346?spm=1001.2014.3001.5501