版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35812380/article/details/84567587
4.6 gallery图片画廊
实现类似照片墙的效果
将resource
资源下的gallery
文件拷贝到public
文件夹下
public 下的文件会最终部署到服务器上,可以通过/绝对路径
去匹配文件
map举例
var a = [1,2,3];
var b = a.map(function (i) {return i*2})
console.log(a);//[1,2,3]
console.log(b);//[2,4,6]
一.Tabs组件
1.Tabs组件
- 引入Tabs:import { Card,Col,Row} from ‘antd’;
- 使用栅格布局
- 定义二维数组,存储图片
// src\pages\ui\gallery.js
import React from "react";
import { Card, Row, Col } from "antd";
export default class Gallery extends React.Component {
render() {
//定义二维数组去存图片
//可以使用两层循环(map),去定义 二维数组
/*
var a = [1,2,3];
var b = a.map(function (i) {return i*2})
console.log(a);//[1,2,3]
console.log(b);//[2,4,6]
*/
const imgs = [
["1.png", "2.png", "3.png", "4.png", "5.png"],
["6.png", "7.png", "8.png", "9.png", "10.png"],
["11.png", "12.png", "13.png", "14.png", "15.png"],
["16.png", "17.png", "18.png", "19.png", "20.png"],
["21.png", "22.png", "23.png", "24.png", "25.png"]
];
const imgList = imgs.map(list =>
list.map(item => (
<Card cover={<img src={"/gallery/" + item} />}>
...
</Card>
))
);
return <div />;
}
}
可以利用 Card.Meta
支持更灵活的内容。
二.实例一
栅格常常需要和间隔进行配合,你可以使用 Row
的 gutter
属性,我们推荐使用 (16+8n)px
作为栅格间隔。(n 是自然数)
如果要支持响应式,可以写成 { xs: 8, sm: 16, md: 24, lg: 32 }
。
gutter
:设置左右间隙style={{ marginBottom: 10}}
:设置卡片上下间距<Card style={{ marginBottom: 10 }} cover={<img src={"/gallery/" + item} />}
<Card.Meta/>
// src\pages\ui\gallery.js
import React from "react";
import { Card, Row, Col } from "antd";
export default class Gallery extends React.Component {
render() {
//定义二维数组去存图片
//可以使用两层循环(map),去定义 二维数组
/*
var a = [1,2,3];
var b = a.map(function (i) {return i*2})
console.log(a);//[1,2,3]
console.log(b);//[2,4,6]
*/
const imgs = [
["1.png", "2.png", "3.png", "4.png", "5.png"],
["6.png", "7.png", "8.png", "9.png", "10.png"],
["11.png", "12.png", "13.png", "14.png", "15.png"],
["16.png", "17.png", "18.png", "19.png", "20.png"],
["21.png", "22.png", "23.png", "24.png", "25.png"]
];
const imgList = imgs.map(list =>
list.map(item => (
<Card
style={{ marginBottom: 10}}
cover={<img src={"/gallery/" + item} />}
>
<Card.Meta title="React Admin" description="I love Imooc" />
</Card>
))
);
return (//一行5列
<div className="card-wrap">
<Row gutter={10}>
<Col md={5}>{imgList[0]}</Col>
<Col md={5}>{imgList[1]}</Col>
<Col md={5}>{imgList[2]}</Col>
<Col md={5}>{imgList[3]}</Col>
<Col md={4}>{imgList[4]}</Col>
</Row>
</div>
);
}
}
三. 升级版
-
添加 查看大图功能,将图片放到 中
-
添加事件onClick
-
使用箭头函数,传递 item
-
footer={null}
: 关闭底部按钮 -
width={300} height={500}
: 设置Modal宽高 -
通过设置
visible
,onCancel
,改变Modal是否显示,来实现图片放大 -
openGallery = imgSrc => {//通过这个方法获得图片,弹出model }; ... <Card style={{ marginBottom: 10}} cover={<img src={"/gallery/" + item} onClick={()=>this.openGallery(item)}/>} /> ...
-
// src\pages\ui\gallery.js
import React from "react";
import { Card, Row, Col, Modal } from "antd";
export default class Gallery extends React.Component {
state = {
visible: false
};
openGallery = imgSrc => {
//通过这个方法获得图片,弹出model,将图片保存到,currentImg
this.setState({
visible: true,
currentImg: "/gallery/"+ imgSrc
});
};
render() {
//定义二维数组去存图片
//可以使用两层循环(map),去定义 二维数组
/*
var a = [1,2,3];
var b = a.map(function (i) {return i*2})
console.log(a);//[1,2,3]
console.log(b);//[2,4,6]
*/
const imgs = [
["1.png", "2.png", "3.png", "4.png", "5.png"],
["6.png", "7.png", "8.png", "9.png", "10.png"],
["11.png", "12.png", "13.png", "14.png", "15.png"],
["16.png", "17.png", "18.png", "19.png", "20.png"],
["21.png", "22.png", "23.png", "24.png", "25.png"]
];
const imgList = imgs.map(list =>
list.map(item => (
<Card
style={{ marginBottom: 10 }}
cover={
<img
src={"/gallery/" + item}
onClick={() => this.openGallery(item)}
/>
}
>
<Card.Meta title="React Admin" description="I love Imooc" />
</Card>
))
);
return (
//一行5列
<div className="card-wrap">
<Row gutter={10}>
<Col md={5}>{imgList[0]}</Col>
<Col md={5}>{imgList[1]}</Col>
<Col md={5}>{imgList[2]}</Col>
<Col md={5}>{imgList[3]}</Col>
<Col md={4}>{imgList[4]}</Col>
</Row>
<Modal
width={300}
height={500}
visible={this.state.visible}
title="图片画廊"
onCancel={() => {
this.setState({
visible: false
});
}}
footer={null}
>
{<img src={this.state.currentImg} style={{width:"100%"}}/>}
</Modal>
</div>
);
}
}
API#
Card#
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
cover | 卡片封面 | ReactNode | - |
Card.Meta#
Property | Description | Type | Default |
---|---|---|---|
description | 描述内容 | ReactNode | - |
title | 标题内容 | ReactNode | - |