适用移动端电脑端（PC）简单的 加载更多、下拉刷新 ，原生js

适用移动端电脑端（PC）简单的 加载更多、下拉刷新 ，原生js

componentDidMount(){
    //渲染完成后触发
    console.log("-==初始化完成触发==-");
    window.addEventListener('scroll', this.scroll.bind(this));
};
componentWillUnmount(){
    console.log("-==销毁前触发==-");
    window.removeEventListener('scroll', this.scroll.bind(this));
};

componentWillReceiveProps(nextProps){
    console.log("-==父组件状态变化触发==-");
};

//--------------上拉加载更多---------------    //获取滚动条当前的位置
 getScrollTop() {
 var scrollTop = 0;
 if(document.documentElement && document.documentElement.scrollTop) {
 scrollTop = document.documentElement.scrollTop;
 } else if(document.body) {
 scrollTop = document.body.scrollTop;
 }
 return scrollTop;
 }

 //获取当前可视范围的高度
 getClientHeight() {
 var clientHeight = 0;
 if(document.body.clientHeight && document.documentElement.clientHeight) {
 clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
 } else {
 clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
 }
 return clientHeight;
 }

 //获取文档完整的高度
 getScrollHeight() {
 return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
 }

 //滚动事件触发
 scroll() {
 if(this.getScrollTop() + this.getClientHeight() === this.getScrollHeight()) {
 console.log("ddada");
 }
 }
//-----------------结束--------------------

//------------------下拉刷新-开始---------------------

import React, { PureComponent } from 'react';
import {Button} from 'sxui-mst';
import ClassNames from 'classnames';
import styles from './down.less';

class Page extends PureComponent{

    state = {
        data: []
    };

    componentDidMount(){
        //渲染完成后触发
        console.log("-==初始化完成触发==-");

        let scroll = document.querySelector('#scroll');
        let outerScroller = document.querySelector('#outerScroller');
        let touchStart = 0;
        let touchDis = 0;
        outerScroller.addEventListener('touchstart', function(event) {
            let touch = event.targetTouches[0];
            // 把元素放在手指所在的位置
            touchStart = touch.pageY;
            console.log("touchStart => ",touchStart);
        }, false);
        outerScroller.addEventListener('touchmove', function(event) {
            let touch = event.targetTouches[0];
            console.log("touch.pageY == ",touch.pageY + 'px');
            scroll.style.top = scroll.offsetTop + touch.pageY-touchStart + 'px';
            console.log("scroll.style.top -- ",scroll.style.top);
            touchStart = touch.pageY;
            touchDis = touch.pageY-touchStart;
        }, false);
        outerScroller.addEventListener('touchend', function(event) {
            touchStart = 0;
            let top = scroll.offsetTop;
            console.log("top > ",top);
            if(top>70)refresh();
            if(top>0){
                let time = setInterval(function(){
                    scroll.style.top = scroll.offsetTop -2+'px';
                    if(scroll.offsetTop<=0)clearInterval(time);
                },1)
            }
        }, false);
        function refresh(){
            //这里是后台数据
            for(let i = 3;i>0;i--)
            {
                let node = document.createElement("li");
                node.innerHTML = "I'm new" + i;
                scroll.insertBefore(node,scroll.firstChild);
            }
        }

    };
    componentWillUnmount(){
        console.log("-==销毁前触发==-");
    };

    componentWillReceiveProps(nextProps){
        console.log("-==父组件状态变化触发==-");
    };

    backClickHandler = () => {
        const {history} = this.props;
        history.goBack();
    };

    handleClick = () => {
        const {data} = this.state;
        data.length = 0;
        for(let i=0;i< 9;i++){
            data.push(i+" -> 2019年4月30日16:11:22");
        }
        this.setState({data: [...data]});
    };

    render(){
        const {data}=this.state;
        return(<div>
            <div className={ClassNames(styles["div1"], styles["body-div"])}>
                <a onClick={this.backClickHandler}>返回</a>
                <Button type="info" onClick={this.handleClick}>随机数据</Button>
            </div>

            <div id="outerScroller" className={ClassNames(styles["outerScroller"], )}>
                <ul id="scroll" className={ClassNames(styles["scroll"], )}>
                    <li>支付宝1</li>
                    <li>支付宝2</li>
                    <li>支付宝3</li>
                    <li>支付宝4</li>
                    <li>支付宝5</li>
                    <li>支付宝6</li>
                    <li>支付宝7</li>
                    <li>支付宝8</li>
                    <li>朋友圈9</li>
                    <li>朋友圈10</li>
                </ul>
            </div>

        </div>);
    }

}

export default Page;

//--------css

.body-div{
    width: fit-content;;
}
.div1{
    margin: 0 auto;
    a{
        cursor: pointer;
    }
}

.outerScroller{
    position: absolute;
    top:0px;
    bottom:0px;
    width:100%;
    left:0px;
    overflow: hidden;

li{
    list-style-type: none;
    height:35px;
    background: gainsboro;
    border-bottom: solid 1px #fff;
    text-align: left;
    line-height: 35px;
    padding-left:15px;
}
ul{
    width:100%;
    margin-top:0px;
    position: absolute;
    left:0px;
    padding:0px;
    top:0px;
}
}

//------------------下拉刷新-结束---------------------

posted on 2019-05-05 14:43  弥留残荷 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/mlch/p/10812977.html