InfiniteLoader 滚动加载

定义

滚动加载组件，可选方向（向上滚动、向下滚动）。

图片展示

代码演示

import InfiniteLoader from 'pile/dist/components/infiniteloader'
import PermissionsCard from 'pile/dist/components/permissionsCard'
const _Ringloading = React.createClass({
  getInitialState() {
return {
  list:[],
  totle : 20,
  stage : 5,
  disSwipe : false,
  direction : "top",
  swipeSucc : false,
  isSwipeIng : false,
  checkStateChange : 1
}
  },
  componentDidMount() {  // 计算初始化的高度
let {direction} = this.state
this.setState({
  list : this.initInitList(direction)
})
  },
  initInitList(direction){
let start = 1,
  end = 6,
  newA = []
for (var i = start; i < end; i++) {
  if (direction === "top") {
    newA.unshift(i)
  }else{
    newA.push(i)
  }
}
return newA
  },
  onSwipingBack(){},
  onSwipedBack(){
let self = this,
  {list,totle,stage,direction} = this.state,
  listLen = list.length
setTimeout(function(){
  if(!(totle == 0 || (totle > 0 && totle == listLen))){
    let i = listLen + 1,
      l = i + stage,
      newList = list
    // 重赋值
    for (; i < l; i ++ ) {
      if (direction === "top") {
newList.unshift(i)
      }else{
newList.push(i)
      }
    }
    // 重置 list
    self.setState({
      list : newList
    })
  }
  self.setState({
    disSwipe : totle <= listLen + stage ? true : false,
    swipeSucc : true
  })
},1000)
  },
  changeDir(o){
let {direction} = this.state
if (o === direction) {
  return false
}
this.setState({
  direction : o,
  disSwipe : false,
  list : this.initInitList(o),
  swipeSucc : false
})
  },
  changeState(){
this.setState({
  checkStateChange :3
})
  },
  render() {
let {list,totle,disSwipe,direction,swipeSucc,isSwipeIng,checkStateChange} = this.state
return (
  <InfiniteLoader
    direction={direction}
    swipeSucc={swipeSucc}
    onSwipingBack={this.onSwipingBack}
    onSwipedBack={this.onSwipedBack}
    disSwipe={disSwipe}
    height={`${document.body.clientHeight}px`}
    defaultbackground="#fff"
  >
    {list.map(function(res,index){
      return (
<div key = {index}>
  <PermissionsCard
iconHTML={>}
titleHTML = {`微信支付合作商谈 - ${res}`}
messageHTML = "1月12日-1月20日"
labelTitle = "过期未审批"
labelType="fail"
href="javascript:;"
  />
</div>
      )
    })}
  </InfiniteLoader>    
)
  }
})

属性