react-waterfall-h5

1.0.7 • Public • Published

react-waterfall-h5是什么?

一款基于React的移动端瀑布流组件。

react-waterfall-h5使用?

引入:

import Waterfall from 'react-waterfall-h5';

参数:

data //类型是数组,该值是需要循环的数据 
columns // 类型是数字,该值指定瀑布流为几列

示例:

 
class Parent extends React.Component{
    
    render(){
      
      const data = [{
          src:a.jpg,
          name:'a'
      },{
          src:b.jpg,
          name:'b'
      },{
          src:c.jpg,
          name:'c'
      }]
 
    return(
      <Waterfall data={data} columns={2}>
        <Child/>
      </Waterfall>
    )
 
  }
  
}
 
class Child extends React.Component{
    
    render(){
 
        const { dataSource } = this.props;  // {src:x.jpg, name:'x'}
 
        return(
          <div>
            <img src={ dataSource.src } className='larry_waterfall_img'/>
            <div>{ dataSource.name }</div>
          </div>
        )
 
  }
  
}

注意

  1. 子组件中img的className必须包含 larry_waterfall_img。
  2. 父组件传给子组件的值,统一被 this.props.dataSource 接收。

有问题反馈

在使用中有任何问题,欢迎反馈给我,可以用以下联系方式跟我交流

  • 邮件:larry_zhu@foxmail.com
  • QQ: 918035829

Package Sidebar

Install

npm i react-waterfall-h5

Weekly Downloads

1

Version

1.0.7

License

ISC

Unpacked Size

117 kB

Total Files

29

Last publish

Collaborators

  • larry_zhu