React共享单车后台管理系统开发（记录笔记4）——4.6 gallery图片画廊

版权声明：本文为博主原创文章，未经博主允许不得转载。 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	-