个人写了一个react下拉刷新,上滑加载更多组件,希望多提bug,能经过市场的验证
去github 下面的demo下载
解决了微信端等浏览器,下拉时候卡顿的问题, 看过大多数下拉刷新组件后总结重构的,使用时需要sass-loader,也可拿走sass文件自己改样式
import React, {
Component} from 'react'
import './index.scss'
import './iconfont'
export default class extends Component {
constructor(props) {
super(props)
this.state = {
marginTop: 0,
loading: false,
isLoadMore: false,
noMore: false
}
}
static defaultProps = {
windowScroll: true,//是否需要在window下面滑动,false时组件高度为父元素的100%
loadMoreIcon: <p className={
'pullRefresh-hint'}>
<svg className={
'pullRefresh-hint-loadMore-text'} aria-hidden="true">
<use xlinkHref="#icon-loading"></use>
</svg>
<span className={
'pullRefresh-hint-loadMore-text'}> 玩命加载中...</span>
</p>,
noMoreHint: <p className={
'pullRefresh-hint'}>没有更多了</p>,
loaderDefaultIcon: (progress) => {
let style = {
transform: `rotate(-${
progress !== 100 ? progress * 1.8 : 0}deg)`,
color: progress !== 100 ? '#5f5f5f' : '#1AAD19'
};
return (
<div className="pullRefresh-loading-icon">
{
progress < 100 && <svg style={
style} className={
'pullRefresh-xiala-icon'} aria-hidden="true">
<use xlinkHref="#icon-xiala"></use>
</svg>}
{
progress === 100 && <svg style={
style} className={
'pullRefresh-xiala-icon'} aria-hidden="true">
<use xlinkHref="#icon-duihao"></use>
</svg>}
<