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
;;;;;;;;;;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' ; { super; thisstate = navSource: ; thisfixed = false; } { this; } { return <div key=index className="nav-list-item" > <img src=itemurl className="nav-list-item-img" /> <div className="nav-list-item-text">itemtext</div> </div> ; } { return <div className="container"> <Waterfall renderNavItem=thisrenderNavItem navSource=thisstatenavSource 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
;;;;; static propTypes = navItem: PropTypesobject loadingState: PropTypes onLoadEnd: PropTypesfunc visible: PropTypesbool static defaultProps = navItem: {} loadingState: 'DONE' {} visible: false { superprops; thisstate = source: thisoffset = 0; } { if thispropsvisible && thisstatesourcelength <= 0 // 如果当前这个类目的 GoodsList 是显示的,且 goodslist 是空的 // 就可以调用 onLoadEnd 回调函数,修改父组件的 loadingState // 回调函数接受的 value 是 string 类型;只有三个值: DONE、LOADING、NOTMORE // 当父组件执行 onLoadEnd 完成后,就会触发当前组件的 WillReceiveProps thisprops; } { if nextPropsloadingState === 'LOADING' && nextPropsloadingState !== thispropsloadingState // 如果父组件的 loadingState 由其他值转变成 LOADING 的话 // 我们可以理解为组件正在进行加载 // 每当数据加载完成后,都需要调用一下 props.onLoadEnd('DONE') 或 props.onLoadEnd('NOTMORE'); // 通知父组件加载完成了 this; if nextPropsvisible && !thispropsvisible && thisstatesourcelength <= 0 thisprops; } { ; } { const source = thisstate; return <ul className="mt-goods-list"> source </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
组件中获取到