まずプロジェクトを作成します
yarn create @umijs/umi-app または npm create @umijs/umi-app
次に、pages フォルダーにホームフォルダーを作成し、2 つのファイル home.tsx とindex.less を作成する必要があります
。画像情報を保存するページと同じレベルにある静的フォルダーを src に作成します。
この場合、antd-mobile を使用する必要があります。umi の antd-mobile がバージョン 2.x であることを知っておく必要があります。 2.x バージョンを使用していない場合は、必要な antd-mobile バージョンを再ダウンロードし、
home.tsx ファイルに書き込む必要があります。
import React, {
useState } from 'react'
import {
NavBar, Space, Button, Grid, Toast, SearchBar } from 'antd-mobile/es'
import './index.less'
import {
useHistory } from 'umi';
import img1 from '@/static/1.jpg'
import img2 from '@/static/2.jpg'
import img3 from '@/static/3.jpg'
import img4 from '@/static/4.jpg'
import img5 from '@/static/5.jpg'
import img6 from '@/static/6.jpg'
import img7 from '@/static/7.jpg'
import img8 from '@/static/8.jpg'
export default function Home() {
const history = useHistory();
const [value, setvalue] = useState('');
const [state, setstate] = useState([
{
id: 1,
img: img1,
name: '红楼梦',
check: false
},
{
id: 2,
img: img2,
name: '西游记',
check: false
},
{
id: 3,
img: img3,
name: '水浒传',
check: false
},
{
id: 4,
img: img4,
name: '三国演义',
check: false
},
{
id: 5,
img: img5,
name: '笑面人',
check: false
},
{
id: 6,
img: img6,
name: '油画',
check: false
},
{
id: 7,
img: img7,
name: '郭记',
check: false
},
{
id: 8,
img: img8,
name: '呼啸山庄',
check: false
},
])
const right = (
<div style={
{
fontSize: 24 }}>
<Space style={
{
'--gap': '16px' }}>
<Button onClick={
() => {
history.push('/book')
}} color={
'success'} fill='none'>
我的书架
</Button>
</Space>
</div>
)
const onbookshelf = (item) => {
let books = JSON.parse(localStorage.getItem('bookshelf'));
if (books) {
let sta = books.some(i => {
return i.name === item.name
})
if (sta) {
Toast.show({
icon: 'success',
content: '加入失败,图书已存在',
})
} else {
books.push(item)
localStorage.setItem('bookshelf', JSON.stringify(books));
Toast.show({
icon: 'success',
content: '加入成功',
})
}
} else {
localStorage.setItem('bookshelf', JSON.stringify([item]));
Toast.show({
icon: 'success',
content: '加入成功',
})
}
}
return (
<div>
<NavBar style={
{
'backgroundColor': 'blue' }} right={
right} backArrow={
false}>
图书商城
</NavBar>
<SearchBar onChange={
(val) => {
setvalue(val) }} placeholder='请输入内容' />
<Grid columns={
2} gap={
8}>
{
value ?
state.filter(user => user.name === value).map((item, index) => {
return (
<Grid.Item key={
index} className='grid-demo'>
<img src={
item.img} alt="" />
<div className='gridxia'>
<span className='gridname'>{
item.name}</span>
<span className='gridbutton'>
<Button size='small'
shape='rounded'
color='primary'
onClick={
() => {
onbookshelf(item)
}}
>
+
</Button>
</span>
</div>
</Grid.Item>
)
})
:
state.map((item, index) => {
return (
<Grid.Item key={
index} className='grid-demo'>
<img src={
item.img} alt="" />
<div className='gridxia'>
<span className='gridname'>{
item.name}</span>
<span className='gridbutton'>
<Button size='small'
shape='rounded'
color='primary'
onClick={
() => {
onbookshelf(item)
}}
>
+
</Button>
</span>
</div>
</Grid.Item>
)
})
}
</Grid>
</div>
)
}
次に、index.less ファイルでページ全体をレイアウトする必要があります。
.grid-demo {
img {
width: 100%;
height: 220px;
}
.gridxia {
.gridbutton {
float: right;
}
}
}