ps：適合h5頁(yè)面的滾動(dòng)條插件法梯，支持app內(nèi)嵌頁(yè)面苔货。
1. 下載scroll-pullLoad
? ??npm install --save react-pullload
2.引用
? ??import ReactPullLoad, { STATS } from "react-pullload";
3. css 樣式
? ? ? ?*引用插件內(nèi)的樣式
? ??????import?"node_modules/react-pullload/dist/ReactPullLoad.css";
? ? ?直接引用插件內(nèi)的樣式可能會(huì)打包是出現(xiàn)問(wèn)題
? ? ? 可以直接用這個(gè)：
????????????.pull-load {
? ????????????????????position: relative;
????? ????????????????overflow-y: scroll;
? ????????????????????-webkit-overflow-scrolling: touch;
????????????}
????????????.pull-load-head {
????????????????????? position: absolute;
????????????????????? transform: translate3d(0px, -100%, 0px);
????????????????????? width: 100%;
????????????}
????????????.state-refreshing .pull-load-head,
????????????.state-refreshed .pull-load-head {
????????????????????? position: relative;
????????????????????? transform: none;
????????????}
????????????.pull-load-body {
????????????????????? position: relative;
????????????}
????????????.state-refreshing .pull-load-body {
? ????????????????????transition: transform 0.2s;
????????????}
????????????.state-reset .pull-load-body {
????????????????????? transition: transform 0.2s;
????????????}
????????????.pull-load-head-default {
????????????????????? text-align: center;
????????????????????? font-size: 12px;
? ????????????????????line-height: 0.8rem;
? ????????????????????color: #7676a1;
????????????}
????????????.state-pulling .pull-load-head-default:after {
? ????????????????????content: '下拉刷新';
????????????}
????????????.state-pulling.enough .pull-load-head-default:after {
????????????????????? content: '松開(kāi)刷新';
????????????}
????????????.state-refreshing .pull-load-head-default:after {
????????????????????? content: '正在刷新...';
????????????}
????????????.state-refreshed .pull-load-head-default:after {
????????????????????? content: '刷新成功';
????????????}
????????????.state-pulling .pull-load-head-default {
? ????????????????????opacity: 1;
????????????}
????????????.state-pulling .pull-load-head-default i {
? ????????????????display: inline-block;
????????????????? font-size: 0.3rem;
????????????????? margin-right: .6em;
????????????????? margin-top: -3px;
????????????????? vertical-align: middle;
? ????????????????height: 0.3rem;
? ????????????????border-left: 1px solid;
? ????????????????position: relative;
? ????????????????transition: transform .3s ease;
????????????}
????????????.state-pulling .pull-load-head-default i:before,
????????????.state-pulling .pull-load-head-default i:after {
????????????????? content: '';
? ? ? ? ? ? ? ? ? position: absolute;
????????????????? font-size: .5em;
? ????????????????width: 1em;
? ????????????????bottom: 0px;
? ????????????????border-top: 1px solid;
????????????}
????????????.state-pulling .pull-load-head-default i:before {
? ? ? ? ? ? ? ? ? right: 1px;
????????????????? transform: rotate(50deg);
????????????????? transform-origin: right;
????????????}
????????????.state-pulling .pull-load-head-default i:after {
? ????????????????left: 0px;
? ????????????????transform: rotate(-50deg);
? ????????????????transform-origin: left;
????????????}
????????????.state-pulling.enough .pull-load-head-default i {
? ????????????????transform: rotate(180deg);
????????????}
????????????.state-refreshing .pull-load-head-default i {
????????????????? margin-right: 10px;
????????????????? margin-top: -3px;
? ????????????????display: inline-block;
? ????????????????vertical-align: middle;
? ????????????????font-size: 0.3rem;
? ????????????????width: 0.3rem;
????????????????? height: 0.3rem;
? ????????????????border: 2px solid #9494b6;
????????????????? border-top-color: #fff;
????????????????? border-radius: 100%;
? ????????????????animation: circle .8s infinite linear;
????????????}
????????????.state-refreshed .pull-load-head-default {
? ? ? ? ? ? ? ? ? opacity: 1;
? ? ? ? ? ? ? ? ? transition: opacity 1s;
????????????}
????????????.state-refreshed .pull-load-head-default i {
? ? ? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? ? ? box-sizing: content-box;
? ? ? ? ? ? ? ? vertical-align: middle;
? ? ? ? ? ? ? ? margin-right: 10px;
? ? ? ? ? ? ? ? margin-top: -3px;
? ? ? ? ? ? ? ? font-size: 14px;
? ? ? ? ? ? ? ? height: 1em;
? ? ? ? ? ? ? ? width: 1em;
? ? ? ? ? ? ? ? border: 2px solid;
? ? ? ? ? ? ? ? border-radius: 100%;
? ? ? ? ? ? ? ? position: relative;
? ? ? ? ?}
? ? ? ? ?.state-refreshed .pull-load-head-default i:before {
? ? ? ? ? ? ? ?content: '';
? ? ? ? ? ? ? position: absolute;
? ? ? ? ? ? ? top: -2px;
? ? ? ? ? ? ? left: 4px;
? ? ? ? ? ? ? height: 11px;
? ? ? ? ? ? ? width: 5px;
? ? ? ? ? ? ? border: solid;
? ? ? ? ? ? ? border-width: 0 2px 2px 0;
? ? ? ? ? ? ? transform: rotate(40deg);
? ? ? ? }
? ? ? ? .pull-load-footer-default {
? ????????????text-align: center;
? ????????????font-size: 12px;
? ????????????line-height: 0.8rem;
????????? ????color: #7676a1;
? ? ? ?}
????????.state-loading .pull-load-footer-default:after {
? ????????????content: '加載更多';
????????}
????????.pull-load-footer-default.nomore:after {
? ????????????content: '沒(méi)有更多';
????????}
????????.state-loading .pull-load-footer-default i {
? ????????????margin-right: 10px;
? ????????????margin-top: -3px;
? ????????????display: inline-block;
? ????????????vertical-align: middle;
? ????????????font-size: 0.3rem;
? ????????????width: 0.3rem;
? ????????????height: 0.3rem;
? ????????????border: 2px solid #9494b6;
? ????????????border-top-color: #fff;
? ????????????border-radius: 100%;
? ????????????animation: circle .8s infinite linear;
????????}
????????@keyframes circle {
? ? ? ? ? ? ?100% {
? ????????????????? transform: rotate(360deg);
????????????? }
????????}
4.pullLoad標(biāo)簽包裹
? ??<ReactPullLoad
? ? ? ? ? ? ? ? ? ? downEnough={150}
? ? ? ? ? ? ? ? ? ? ref="reactpullload"
? ? ? ? ? ? ? ? ? ? className="block"
? ? ? ? ? ? ? ? ? ? ?*加上下面注釋的屬性會(huì)出問(wèn)題
? ? ? ? ? ? ? ? ? ? // isBlockContainer={true}
? ? ? ? ? ? ? ? ? ? action={this.state.action}
? ? ? ? ? ? ? ? ? ? handleAction={this.handleAction}
? ? ? ? ? ? ? ? ? ? hasMore={this.state.hasMore}
? ? ? ? ? ? ? ? ? ? style={{paddingTop: 132}}
? ? ? ? ? ? ? ? ? ? distanceBottom={1000}>
? ? ? ? ? ? ? ? ? ? .....? this is list
? ? ? ? ? ? ? ? ? ? </ReactPullLoad>
5.scroll函數(shù)
constructor(props) {
? ? ? ? super(props);
? ? ? ? this.state = {
? ? ? ? ? ? ? // scroll 相關(guān)
? ? ? ? ? ? ? hasMore: true,
? ? ? ? ? ? ? action: STATS.init,
? ? ? ? }
? ? }
// 滾動(dòng)條
? ? handleAction = (action) => {
? ? ? if(action === this.state.action ||
? ? ? ? action === STATS.refreshing && this.state.action === STATS.loading ||
? ? ? ? action === STATS.loading && this.state.action === STATS.refreshing){
? ? ? ? return false
? ? ? }
? ? ? if(action === STATS.refreshing){//刷新
? ? ? ? ? setTimeout(()=>{
? ? ? ? ? ? ? ? ? //refreshing complete
? ? ? ? ? ? ? ? 下拉刷新
? ? ? ? ? }, 1000)
? ? ? } else if(action === STATS.loading){//加載更多
? ? ? ? this.setState({
? ? ? ? ? hasMore: true
? ? ? ? });
? ? ? ? setTimeout(()=>{
? ? ? ? ? ????????if(this.state.index === this.state.curPage){
? ? ? ? ? ? ? ? ? ? ? ? ?this.setState({
? ? ? ? ? ? ? ? ? ? ? ? ?????????action: STATS.reset,
? ? ? ? ? ? ? ????????????????????hasMore: false
? ? ? ? ? ? ? ? ? ?????????});
? ? ? ? ? ? ? ? ? ? ? ? } else{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 上拉加載....
? ? ? ? ? ????????????????}
? ? ? ? ? ? }, 1000)
? ? ? }
? ? ? this.setState({
? ? ? ? action: action
? ? ? })
? ? }
? ? ? ? 這是react-pullLoad作者npm插件地址：https://www.npmjs.com/package/react-pullload
