README
mt-lazy-image
A light-weight React mt-lazy-image component with extremely easy API(只适用于移动端项目). Online Demo, welcome code review
Installation
npm install mt-lazy-image --save
Usage mt-lazy-image
import React, { PureComponent } from 'react';
import './app.less';
import Image from 'mt-lazy-image'
import { data } from './constant';
export default class App extends PureComponent {
constructor() {
super();
this.state = {
source: [],
}
this.containRef = React.createRef(null);
}
componentDidMount() {
this.setState({ source: data })
}
render() {
return (
<div className="container" >
<ul className="mt-goods-list" ref={this.containRef}>
{
this.state.source.map(item =>
<li className="mt-goods-list-item" key={item.goods_id}>
<Image
src={item.url}
alt="商品图片"
className="mt-goods-list-item-avator"
container={this.containRef.current}
/>
<div className="mt-goods-list-item-name">{item.name}</div>
<div className="mt-goods-list-item-price">{(item.price / 100 || 0).toFixed(2)}</div>
<div className="mt-goods-list-item-button">去抢购</div>
</li>
)
}
</ul>
</div>
);
}
}
props
param | detail | type | default |
---|---|---|---|
className | img class name | string | '' |
src | img src | string | isRequired |
defaultsrc | img default src | string | '' |
alt | img alt | string | '' |
container | Under which DOM node (overflow: auto / scroll) | any | window |
propName | Other HTML attributes that can be set on the img element | any |
注意
使用是需要注意 container props
。这个props的值是一个设置了 overflow: auto | scroll
属性的 dom
元素