ImageList

图片列表组件

  • 通过column设置图片列表的列数，1-8列。
  • 若需要懒加载，请配合Image组件使用。

主要属性和接口：

  • column:列表的列数，默认1列。
    <ImageList column={4}>
{
   this.state.images.map((data,index)=>{
       return (
           <dl className='ph-image-item' key={index}>
               <dt>
                   <Image src={data.image} alt={data.title} lazy/>
               </dt>
               <dd>
                   <p className='ph-image-title'>{data.title}</p>
                   <p className='ph-image-desp'>{data.desp}</p>
               </dd>
           </dl>
       )
   })
}
</ImageList>

方法

属性

事件

Extends Component
Defined in: src/image-list/index.js:10
Module: 操作类组件

Available since 1.7.0

Constructor

ImageList

ImageList ()

Defined in src/image-list/index.js:10

Available since 1.7.0

Example:

import React, { Component } from "react"

import ImageList from "phoenix-ui/lib/image-list"
import Image from "phoenix-ui/lib/image"
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">column(默认1) 图片列数</h3>
                <ImageList column={4}>
                    {
                        this.state.images.map((data,index)=>{
                            return (
                                <dl className="ph-image-item" key={index}>
                                    <dt>
                                        <Image src={data.image} alt={data.title}/>
                                    </dt>
                                    <dd>
                                        <p className='ph-image-title'>{data.title}</p>
                                        <p className='ph-image-desp'>{data.desp}</p>
                                    </dd>
                                </dl>
                            )
                        })
                    }
                </ImageList>
                <ImageList column={2}>
                    {
                        this.state.images.map((data,index)=>{
                            return (
                                <dl className="ph-image-item" key={index}>
                                    <dt>
                                        <Image src={data.image} alt={data.title}/>
                                    </dt>
                                    <dd>
                                        <p className='ph-image-title'>{data.title}</p>
                                        <p className='ph-image-desp'>{data.desp}</p>
                                    </dd>
                                </dl>
                            )
                        })
                    }
                </ImageList>
                <Code target="imagelist-column" />                
            </div>
        );
    }
}

属性

classPrefix

String

Defined in src/image-list/index.js:48

样式前缀

Default:

'image-list'

column

Number

Defined in src/image-list/index.js:55

图片列数，默认1列

Default:

1