better-scroll2.0 及 react17 的 单页面 类组件 及 函数组件 使用

git

https://gitee.com/mirrors/better-scroll/

1.x 文档

https://better-scroll.github.io/docs-v1/doc/zh-hans/

2.x文档

https://better-scroll.github.io/docs/zh-CN/guide/use.html#%E5%9F%BA%E7%A1%80%E6%BB%9A%E5%8A%A8

注意：1.x 的代码已经不维护，请尽早升级版本。

使用

react 17.0.2

better-scroll 2.4.2

cnpm install @better-scroll/core --save
cnpm install @better-scroll/pull-up --save
cnpm install @better-scroll/pull-down --save

类组件 基本使用

index.jsx

import React, { Component } from 'react';
import './dent.less';
import BScroll from '@better-scroll/core';
import Pullup from '@better-scroll/pull-up';
import PullDown from '@better-scroll/pull-down';
import { getPreAuthRecords } from 'apis';
BScroll.use(Pullup)
BScroll.use(PullDown)

class dent extends Component {
    constructor(props) {
        super(props)
        this.state= {
            records: []
        }
    }
    fetchData = (bs) => {
        getPreAuthRecords()
        .then(res => {
            const data = [...this.state.records, ...res.data]
            this.setState({
                records: data
            })
            if (!bs) return
            bs.finishPullUp()
            bs.refresh()
        })
    }
    fetchRefresh = (bs) => {
        getPreAuthRecords()
        .then(res => {
            const data = res.data
            this.setState({
                records: data
            })
            if (!bs) return
            bs.finishPullDown()
            bs.refresh()
        })
    }
    componentDidMount () {
        const bs = new BScroll('#wrapper', {
            probeType: 3,
            click: true,
            pullUpLoad: true,
            pullDownRefresh: true
        })
        bs.on('pullingUp', () => {
            this.fetchData(bs)
        })
        bs.on('pullingDown', () => {
            this.fetchRefresh(bs)
        })
        this.fetchData(bs)
    }
    render () {
        return (
            <div id='wrapper'>
                <div className='content'>
                    {
                        this.state.records && this.state.records.map( (item, i) => {
                            return <li className='listIten' key={item.ocId + i}>{(i + 1) % 5 === 0 ? "scroll up ????" : `I am item ${i + 1 + item.insuredInfo.name} `}li>
                        })
                    }
                div>
            div>
        )
    }
}

export default dent;

dent.less

#wrapper {
  overflow: hidden;
  height: 100vh;
  .content {
    // 底部显示不全
    padding: 0 0 50px; /* no */ 
  }
  .listIten {
    font-size: @font-size-medium;
    padding: 30px;
  }
}

函数组件   不是很了解副作用，在学习修改中

先贴上代码，看看谁知道哪里出问题

问题： 每次上拉，都会以 2的n次方 ，请求数据  不知道第二个useEffect ，怎么传递第二个参数就可以修改

// import React, { useState, useEffect } from 'react';
// import './dent.less';
// import BScroll from '@better-scroll/core'
// import Pullup from '@better-scroll/pull-up'
// import { getPreAuthRecords } from 'apis';

// BScroll.use(Pullup)

// function dent () {
//     const [records, setRecords] = useState([]);
//     const fetchData = (bs) => {
//         getPreAuthRecords()
//         .then(res => {
//             const data = [...records, ...res.data]
//             console.log('1');
//             setRecords(data)
//             if (!bs) return
//             bs.finishPullUp()
//             bs.refresh()
//         })
//     }
//     // 创建 scroll
//     const [bScroll, setBScroll] = useState();
//     useEffect(() => {
//         const bs = new BScroll('#wrapper', {
//             probeType: 3,
//             click: true,
//             pullUpLoad: true
//         })
//         console.log('首次');
//         fetchData(bs)
//         setBScroll(bs)
//     },[])

//     useEffect(() => {
//         if(!bScroll) return;
//         bScroll.on('pullingUp', () => {
//             console.log('上拉');
//             fetchData(bScroll)
//         })
//     }, [records, bScroll])

//   return (
//     <div id='wrapper'>
//       <div className='content'>
//                 {
//                     records.map( (item, i) => {
//                         return <li className='listIten' key={item.ocId + i}>{(i + 1) % 5 === 0 ? "scroll up ????" : `I am item ${i + 1} `}li>
//                     })
//                 }
//             div>
//     div>
//   )
// }

// export default dent;

修改 后的

import React, { useState, useEffect } from 'react';
import './dent.less';
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
import PullDown from '@better-scroll/pull-down';
import { getPreAuthRecords } from 'apis';

BScroll.use(Pullup)
BScroll.use(PullDown)

function dent () {
    const [records, setRecords] = useState([]);

    const fetchData = (bs) => {
        getPreAuthRecords()
        .then(res => {
            const data = [...records, ...res.data]
            console.log(1)
            setRecords(data)
            if (!bs) return
            bs.finishPullUp()
            bs.refresh()
        })
    }
    const    fetchRefresh = (bs) => {
        getPreAuthRecords()
        .then(res => {
            const data = [...res.data]
            console.log(2)
            setRecords(data)
            if (!bs) return
            bs.finishPullDown()
            bs.refresh()
        })
    }

    // 创建 scroll
    const [bScroll, setBScroll] = useState();
    useEffect(() => {
        const bs = new BScroll('#wrapper', {
            probeType: 3,
            click: true,
            pullUpLoad: true,
            pullDownRefresh: true
        })
        console.log('首次');
        fetchData(bs)
        setBScroll(bs)
        return () => {
      //  组件卸载时记得将其销毁
      setBScroll(null)
    }
    },[])

    // 上拉加载
    useEffect(() => {
        if(!bScroll) return;
        // 必须清除 一次事件,否则会累加
        bScroll.off('pullingUp')
        bScroll.once('pullingUp', () => {
            console.log('上拉')
            fetchData(bScroll)
        })
    }, [records])

    // 下拉刷新
    useEffect(() => {
        if(!bScroll) return;
        // 必须清除 一次事件,否则会累加
        bScroll.off('pullingDown')
        bScroll.once('pullingDown', () => {
            console.log('下拉')
            fetchRefresh(bScroll)
        })
    }, [records])

  return (
    <div id='wrapper'>
      <div className='content'>
                {
                    records.map( (item, i) => {
                        return <li className='listIten' key={item.ocId + i}>{`I am item ${i + 1} `}li>
                    })
                }
            div>
    div>
  )
}

export default dent;

纠结了好几天的 问题好了，到此 完成 函数组件的上拉加载 下拉刷新！！！！！！

封装共用组件，

https://www.cnblogs.com/-roc/p/15129088.html