ImageList

图片列表组件

  • 通过images配置图片列表数据，数组格式，其中图片地址对应image字段，名称对应title字段，描述对应desp字段。
  • 通过column设置图片列表的列数，1-8列。
  • 通过titleField设置名称的格式，以#代表名称；通过despField设置描述的格式，以#代表描述。
  • 通过otherParams设置额外的字段和格式。
  • 通过clickCallback设置点击单个图片块的回调函数，返回当前图片的所有数据。
  • 可以自定义内容children，当有内容时除了column其他属性不起作用。

主要属性和接口：

  • images:图片列表数据，默认[]。
    json:
{
"data": [
   {
       "image": "http://img5.duitang.com/uploads/item/201602/11/20160211214958_RhdCY.jpeg",
       "title": "图1",
       "desp": "关于图是一个...",
       "score": 1
   },
   ...
]
}
...
<ImageList images={this.state.images} />
  • column:列表的列数，默认1。
    如: <ImageList column={2} images={this.state.images} />
  • titleField:名称的格式，以#代表名称，默认"#"despField:描述的格式，以#代表描述，默认"#"。
    如: <ImageList images={this.state.images} titleField={"姓名: #"} despField={"描述: #"} />
  • otherParams:额外的字段和格式，默认{}。
    如: <ImageList images={this.state.images} otherParams={{"score":"分数: #"}} />
  • clickCallback:点击单个图片块的回调函数。
    如: <ImageList images={this.state.images} clickCallback={(data)=>{console.log(data);}} />
  • 自定义内容:children，当有内容时除了column其他属性不起作用。
    <ImageList column={4}>
{
   this.state.images.map((data,index)=>{
       return (
           <dl key={index}>
               <dd>
                   <p>{data.title}</p>
                   <p>{data.desp}</p>
               </dd>
               <dt>
                   <img src={data.image} alt={data.title} />
               </dt>
           </dl>
       )
   })
}
</ImageList>
Extends Component
Defined in: src/ImageList.js:6
Module: 操作类组件

Available since 1.7.0

Constructor

ImageList

ImageList ()

Defined in src/ImageList.js:6

Available since 1.7.0

Example:

import React, { Component } from "react";
import {ImageList} from "phoenix-ui";
import Code from "./code/code";
import {ajax} from "./utils/tool.js";

export default class imagelist extends Component{
    constructor(props,context){
        super(props,context); 

        this.state = {
            images: []
        }

        this.getData("./data/post1.json",0);
    }

    getData(fileName){ // 获取数据方法，ajax方法在下面定义了
        ajax(fileName).then((json)=>{
            let data = json.data;

            this.setState({
                images: data
            }); 

        }, (error)=>{// 加载失败
            console.error("出错了", error)
        });
    }

    render(){
        return(
            <div>
                <h2 className="comp-title">ImageList</h2>
                <h3 className="comp-type">images(默认[]) 图片数据<br/>默认地址的字段是image，名称的字段是title，描述的字段是desp</h3>
                <ImageList images={this.state.images} column={4} />
                <Code target="imagelist-images" />               

                <h3 className="comp-type">column(默认1) 图片列数</h3>
                <ImageList column={2}  images={this.state.images} />
                <Code target="imagelist-column" /> 

                <h3 className="comp-type">titleField(默认#) 姓名格式更改，#代表数值；<br/>despField(默认#) 描述格式更改，#代表数值</h3>
                <ImageList images={this.state.images} column={4} titleField={"姓名: #"} despField={"描述: #"} />
                <h3 className="comp-tip"> 如果name或desp中有不要的字段，传空字符"" </h3>
                <ImageList images={this.state.images} column={4} titleField={"姓名: #"} despField={""} />
                <Code target="imagelist-format" /> 

                <h3 className="comp-type">otherParams(默认{}) 其他增加项</h3>
                <ImageList images={this.state.images} column={4} otherParams={{"score":"分数: #"}} />
                <Code target="imagelist-otherparams" /> 

                <h3 className="comp-type">clickCallback(默认null) 点击单个图片块的回调函数</h3>
                <ImageList images={this.state.images} column={4} clickCallback={(data)=>{console.log(data);}} />
                <Code target="imagelist-clickcallback" /> 

                <h3 className="comp-type">children(默认无) 内容完全自定义</h3>
                <ImageList column={4}>
                    {
                        this.state.images.map((data,index)=>{
                            return (
                                <dl key={index}>
                                    <dd>
                                        <p className="ph-image-title">{data.title}</p>
                                        <p className="ph-image-desp">{data.desp}</p>
                                    </dd>
                                    <dt>
                                        <img src={data.image} alt={data.title} />
                                    </dt>
                                </dl>
                            )
                        })
                    }
                </ImageList>
                <Code target="imagelist-custom" /> 
            </div>
        );
    }
}

方法

clickCallback

clickCallback ()

Defined in src/ImageList.js:115

点击单个图片块的回调函数,返回当前图片的所有信息

属性

classPrefix

String

Defined in src/ImageList.js:73

样式前缀

Default:

'image-list'

column

Number

Defined in src/ImageList.js:87

图片列数

Default:

1

despField

String

Defined in src/ImageList.js:101

描述格式

Default:

"#"

images

Array

Defined in src/ImageList.js:80

图片列表数据

Default:

[]

otherParams

Object

Defined in src/ImageList.js:108

其他参数，额外增加的可自定义的字段

Default:

{}

titleField

String

Defined in src/ImageList.js:94

名称格式

Default:

"#"