1.1.0 • Published 4 years ago
mt-waterfall v1.1.0
mt-waterfall
A light-weight React mt-waterfall component with extremely easy API(只适用于移动端项目). Online Demo, welcome code review
Installation
npm install mt-waterfall --save
Usage Waterfall
import React, { PureComponent } from 'react';
import img1 from './static/images/11.jpg';
import img2 from './static/images/12.jpg';
import img3 from './static/images/13.jpg';
import img4 from './static/images/14.jpg';
import img5 from './static/images/15.jpg';
import img6 from './static/images/16.png';
import Waterfall from './waterfall';
import './app.css';
import GoodsList from './goodsList';
const source = [
{
url: img1,
text: '精选',
label: '11',
},
{
url: img2,
text: '良品铺子',
label: '22',
},
{
url: img3,
text: '乳饮酒水',
label: '33',
},
{
url: img4,
text: '粮油米面',
label: '44',
},
{
url: img5,
text: '纸品家清',
label: '55',
},
{
url: img6,
text: '休闲食品',
label: '66',
},
{
url: img1,
text: '时令生鲜',
label: '77',
},
{
url: img2,
text: '美容个理',
label: '88',
},
];
export default class App extends PureComponent {
constructor() {
super();
this.state = {
navSource: [],
};
this.fixed = false;
}
componentDidMount() {
this.setState({navSource: source});
}
renderNavItem = (item, index) => {
return (
<div
key={index}
className="nav-list-item"
>
<img src={item.url} className="nav-list-item-img" />
<div className="nav-list-item-text">{item.text}</div>
</div>
);
}
render() {
return (
<div className="container">
<Waterfall
renderNavItem={this.renderNavItem}
navSource={this.state.navSource}
waterfallTemplate={GoodsList}
extraKey="label"
tabIndex={0}
navBackground='#f90'
className="waterfall"
navClassName="waterfall-header"
/>
</div>
);
}
}
props
param | detail | type | default |
---|---|---|---|
className | waterfall class name | string | '' |
waterfallTemplate | waterfall content template | function | isRequired |
navSource | navigation list of waterfalls | array | [] |
extraKey | distinguish the unique key of the navSource array element | string | isRequired |
navBackground | navigation background color | string | '' |
navClassName | navigation class name | string | '' |
renderNavItem | waterfall navigation list item content template | function | isRequired |
tabIndex | the first few tabs are displayed when the waterfall is initially rendered | number | 0 |
loadingText | the content displayed by loading when the waterfall is pulled up and loaded | string | 努力加载中 |
loadingCompletedText | the content displayed by loading when the waterfall flow is loaded | string | 上拉加载更多信息 |
notMoreText | when the waterfall pulls up and loads all the data, loading the displayed content | string | 我也是有底线的 |
showLoading | hide or show loading tips | bool | true |
propName | any | any |
Usage waterfallTemplate
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { request } from '../constant';
import Image from 'mt-lazy-image';
import './index.less';
export default class GoodsList extends PureComponent {
static propTypes = {
navItem: PropTypes.object,
loadingState: PropTypes.oneOf([
'LOADING',
'DONE',
'NOTMORE',
]),
onLoadEnd: PropTypes.func,
visible: PropTypes.bool,
}
static defaultProps = {
navItem: {},
loadingState: 'DONE',
onLoadEnd: () => {},
visible: false,
}
constructor(props) {
super(props);
this.state = {
source: [],
}
this.offset = 0;
}
componentDidMount() {
if (this.props.visible && this.state.source.length <= 0) {
// 如果当前这个类目的 GoodsList 是显示的,且 goodslist 是空的
// 就可以调用 onLoadEnd 回调函数,修改父组件的 loadingState
// 回调函数接受的 value 是 string 类型;只有三个值: DONE、LOADING、NOTMORE
// 当父组件执行 onLoadEnd 完成后,就会触发当前组件的 WillReceiveProps
this.props.onLoadEnd('LOADING');
}
}
UNSAFE_componentWillReceiveProps (nextProps) {
if (
nextProps.loadingState === 'LOADING' &&
nextProps.loadingState !== this.props.loadingState
) {
// 如果父组件的 loadingState 由其他值转变成 LOADING 的话
// 我们可以理解为组件正在进行加载
// 每当数据加载完成后,都需要调用一下 props.onLoadEnd('DONE') 或 props.onLoadEnd('NOTMORE');
// 通知父组件加载完成了
this.handleLoadMore();
}
if (
nextProps.visible &&
!this.props.visible &&
this.state.source.length <= 0
) {
this.props.onLoadEnd('LOADING');
}
}
handleLoadMore = () => {
request({ offset: this.offset, activity_id: this.props.navItem.label })
.then(data => {
this.setState(prevState => ({ source: prevState.source.concat(...data.items)}));
this.offset = data.offset;
if (!data.offset || data.items.length <= 0) {
this.props.onLoadEnd('NOTMORE');
} else {
this.props.onLoadEnd('DONE');
}
})
.catch(() => {
this.props.onLoadEnd('DONE');
});
}
render() {
const { source } = this.state;
return (
<ul className="mt-goods-list">
{
source.map(item =>
<li className="mt-goods-list-item" key={item.goods_id}>
<Image
src={item.url}
alt="商品图片"
className="mt-goods-list-item-avator"
/>
<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>
);
}
}
props
param | detail | type | default |
---|---|---|---|
navItem | information of the selected navigation list item | object | '' |
loadingState | pull-up loading status | string | One of DONE, LOADING, NOTMORE, the default value is DONE |
onLoadEnd | the callback when the pull-up loading is completed | array | [] |
visible | hide or show | boolean | false |
propName | accept the props of the waterfall component | any |
注意
Waterfall
组件接受的任何 props
都可以在 waterfallTemplate
组件中获取到