mt-lazy-image

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 元素