手机滚动加载

2019独角兽企业重金招聘Python工程师标准>>>

 Vue项目，h5实现手机端滚动加载。不用第三方插件

mounted(){
     window.addEventListener('scroll',this.handleScroll);
},
methods:{
        handleScroll(e){
                function getViewportSize(w){
                    //使用指定的窗口， 如果不带参数则使用当前窗口
                    w = w || window;

                    //除了IE8及更早的版本以外，其他浏览器都能用
                    if(w.innerWidth != null)
                        return {w: w.innerWidth, h: w.innerHeight};

                    //对标准模式下的IE（或任意浏览器）
                    var d = w.document;
                    if(document.compatMode == "CSS1Compat")
                        return {w: d.documentElement.clientWidth, h: d.documentElement.clientHeight};

                    //对怪异模式下的浏览器
                    return {w: d.body.clientWidth, h: d.body.clientHeight};
                }
                var documentHeight = document.documentElement.offsetHeight;
                var viewPortHeight = getViewportSize().h;
                var scrollHeight = window.pageYOffset ||
                        document.documentElement.scrollTop ||
                        document.body.scrollTop || 0;
                if(documentHeight - viewPortHeight - scrollHeight < 20){
                    //加载数据
                    var obj={
                        "id": 159,
                        "name": "Hello"
                    };
                    this.dataList.push(obj);
                }
            }
}

暂时写到这里，

1.如果时ajax请求获取数据，需要一个sentStatus的变量，发送请求。设置为true。

当sentStatus=true时，不会触发ajax请求。

2.是否要增加计时器，限制为1s只能触发一次。

转载于:https://my.oschina.net/zhangyafei/blog/1830246