From 46861024b77aa3715af687c32cb5976710c17aed Mon Sep 17 00:00:00 2001 From: sanyuan <494130947@qq.com> Date: Fri, 23 Aug 2019 20:15:32 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=A8=E9=83=A8=E7=BB=84=E4=BB=B6=E7=94=A8ho?= =?UTF-8?q?oks=E9=87=8D=E6=9E=84=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/application/Singers/index.js | 127 ++++++++++++++++--------------- src/baseUI/scroll/index.js | 113 +++++++++++++++++++-------- 2 files changed, 147 insertions(+), 93 deletions(-) diff --git a/src/application/Singers/index.js b/src/application/Singers/index.js index 5440ea8..53c0bb5 100644 --- a/src/application/Singers/index.js +++ b/src/application/Singers/index.js @@ -1,4 +1,4 @@ -import React, { PureComponent } from 'react'; +import React, { useRef, useEffect } from 'react'; import Horizen from '../../baseUI/horizen-item/index'; import { categoryTypes, alphaTypes } from '../../api/config'; import { @@ -15,46 +15,53 @@ import LazyLoad, {forceCheck} from 'react-lazyload'; import Loading from '../../baseUI/loading/index'; import { renderRoutes } from 'react-router-config'; -// 这里采用class，之前写过hooks版，但是pageCount的更新存在bug, -// 有兴趣的小伙伴可以试试改为hooks版本， bug修复后换成函数式，欢迎大家提pr修正 -class Singers extends PureComponent{ - constructor(props) { - super(props); - Singers.scrollChild = React.createRef(null); - } - componentDidMount() { - if(!this.props.singerList.length && !this.props.category && !this.props.alpha){ - this.props.getHotSinger(); +function Singers(props){ + const scrollRef = useRef(null); + + const { singerList, category, alpha, pageCount, songsCount, pullUpLoading, pullDownLoading, enterLoading } = props; + + const { getHotSinger, updateCategory, updateAlpha, pullUpRefresh, pullDownRefresh } = props; + + useEffect(() => { + if(!singerList.length && !category && !alpha) { + getHotSinger(); } - } + // eslint-disable-next-line + }, []); - enterDetail (id) { - this.props.history.push(`/singers/${id}`); - } - handlePullUp () { - this.props.pullUpRefresh(this.props.category === '', this.props.pageCount); - } - handlePullDown(){ - this.props.pullDownRefresh(this.props.category, this.props.pageCount); - } - handleUpdateCategory(newVal) { - if(this.props.category === this.props.newVal) return; - this.props.updateCategory(newVal); - } + const enterDetail = (id) => { + props.history.push(`/singers/${id}`); + }; - handleUpdateAlpha(newVal) { - if(this.props.alpha === newVal) return; - this.props.updateAlpha(newVal); - } - renderSingerList() { - const {singerList} = this.props; + const handlePullUp = () => { + pullUpRefresh(category === '', pageCount); + }; + + const handlePullDown = () => { + pullDownRefresh(category, pageCount); + }; + + const handleUpdateCategory = (newVal) => { + if(category === newVal) return; + scrollRef.current.refresh(); + updateCategory(newVal); + }; + + const handleUpdateAlpha = (newVal) => { + if(alpha === newVal) return; + scrollRef.current.refresh(); + updateAlpha(newVal); + }; + + const renderSingerList = () => { + const {singerList} = props; return ( { singerList.toJS().map((item, index) => { return ( - this.enterDetail(item.id)}> + enterDetail(item.id)}>
}> music @@ -67,35 +74,31 @@ class Singers extends PureComponent{ } ) - } - render() { - const { alpha, category, enterLoading, songsCount, pullUpLoading,pullDownLoading } = this.props; - - return ( -
- {/* 对于better-scroll来讲，其作用的元素外面必须要有一个尺寸确定的容器包裹，因此设置xxxContainer */} - - this.handleUpdateCategory(v)} oldVal={category}> - this.handleUpdateAlpha(v)} oldVal={alpha}> - - - forceCheck() } - pullUp={() => this.handlePullUp()} - pullDown = {() => this.handlePullDown()} - ref={Singers.scrollChild} - pullUpLoading = { pullUpLoading } - pullDownLoading = { pullDownLoading } - > - { this.renderSingerList() } - - - {/* 入场加载动画 */} - { enterLoading ? : null} - { renderRoutes(this.props.route.routes) } -
- ) - } + }; + return ( +
+ {/* 对于better-scroll来讲，其作用的元素外面必须要有一个尺寸确定的容器包裹，因此设置xxxContainer */} + + handleUpdateCategory(v)} oldVal={category}> + handleUpdateAlpha(v)} oldVal={alpha}> + + + forceCheck() } + pullUp={ handlePullUp } + pullDown = { handlePullDown } + ref={ scrollRef } + pullUpLoading = { pullUpLoading } + pullDownLoading = { pullDownLoading } + > + { renderSingerList() } + + + {/* 入场加载动画 */} + { enterLoading ? : null} + { renderRoutes(props.route.routes) } +
+ ) } const mapStateToProps = (state) => ({ alpha: state.getIn(['singers', 'alpha']), @@ -113,14 +116,12 @@ const mapDispatchToProps = (dispatch) => { dispatch(getHotSingerList()); }, updateCategory(newVal) { - Singers.scrollChild.current.refresh(); dispatch(changeCategory(newVal)); dispatch(changePageCount(0)); dispatch(changeEnterLoading(true)); dispatch(getSingerList()); }, updateAlpha(newVal) { - Singers.scrollChild.current.refresh(); dispatch(changeAlpha(newVal)); dispatch(changePageCount(0)); dispatch(changeEnterLoading(true)); diff --git a/src/baseUI/scroll/index.js b/src/baseUI/scroll/index.js index 9e3a179..4b7abb4 100644 --- a/src/baseUI/scroll/index.js +++ b/src/baseUI/scroll/index.js @@ -31,6 +31,52 @@ export const PullDownLoading = styled.div` z-index: 100; ` +// 下为问题代码，以此为鉴 +// useEffect(() => { +// if(bScroll) return; +// const scroll = new BScroll(scrollContaninerRef.current, { +// scrollX: direction === "horizental", +// scrollY: direction === "vertical", +// probeType: 3, +// click: click, +// bounce:{ +// top: bounceTop, +// bottom: bounceBottom +// } +// }); +// setBScroll(scroll); +// if(pullUp) { +// scroll.on('scrollEnd', () => { +// //判断是否滑动到了底部 +// if(scroll.y <= scroll.maxScrollY + 100){ +// pullUp(); +// } +// }); +// } +// if(pullDown) { +// scroll.on('touchEnd', (pos) => { +// //判断用户的下拉动作 +// if(pos.y > 50) { +// debounce(pullDown, 0)(); +// } +// }); +// } + +// if(onScroll) { +// scroll.on('scroll', (scroll) => { +// onScroll(scroll); +// }) +// } + +// if(refresh) { +// scroll.refresh(); +// } +// return () => { +// scroll.off('scroll'); +// setBScroll(null); +// } +// // eslint-disable-next-line +// }, []); const Scroll = forwardRef((props, ref) => { const [bScroll, setBScroll] = useState(); @@ -53,44 +99,54 @@ const Scroll = forwardRef((props, ref) => { } }); setBScroll(scroll); - if(pullUp) { - scroll.on('scrollEnd', () => { - //判断是否滑动到了底部 - if(scroll.y <= scroll.maxScrollY + 100){ - pullUp(); - } - }); - } - if(pullDown) { - scroll.on('touchEnd', (pos) => { - //判断用户的下拉动作 - if(pos.y > 50) { - debounce(pullDown, 0)(); - } - }); + return () => { + setBScroll(null); } + // eslint-disable-next-line + }, []); - if(onScroll) { - scroll.on('scroll', (scroll) => { - onScroll(scroll); - }) + useEffect(() => { + if(!bScroll || !onScroll) return; + bScroll.on('scroll', (scroll) => { + onScroll(scroll); + }) + return () => { + bScroll.off('scroll'); } + }, [onScroll, bScroll]); - if(refresh) { - scroll.refresh(); + useEffect(() => { + if(!bScroll || !pullUp) return; + bScroll.on('scrollEnd', () => { + //判断是否滑动到了底部 + if(bScroll.y <= bScroll.maxScrollY + 100){ + debounce(pullUp, 200)(); + } + }); + return () => { + bScroll.off('scrollEnd'); } + }, [pullUp, bScroll]); + + useEffect(() => { + if(!bScroll || !pullDown) return; + bScroll.on('touchEnd', (pos) => { + //判断用户的下拉动作 + if(pos.y > 50) { + debounce(pullDown, 200)(); + } + }); return () => { - scroll.off('scroll'); - setBScroll(null); + bScroll.off('touchEnd'); } - // eslint-disable-next-line - }, []); + }, [pullDown, bScroll]); + useEffect(() => { if(refresh && bScroll){ bScroll.refresh(); } - }) + }); useImperativeHandle(ref, () => ({ refresh() { @@ -139,7 +195,4 @@ Scroll.propTypes = { bounceBottom: PropTypes.bool//是否支持向上吸顶 }; - - - -export default React.memo(Scroll); +export default Scroll;