React共享單車後臺管理系統開發(記錄筆記4)——4.6 gallery圖片畫廊
阿新 • • 發佈:2018-12-19
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 | - |