vue+vux移动端上拉加载更多,遇到的坑

项目属于嵌入h5.挂在企业微信。由于列表过多,一般电脑端使用分页,但是手机端分页不合理,所以计划用上拉到底部加载更多,实现分页。

一开始百度查到很多都是再用监听页面滚动事件  window.addEventListener('scroll', this.scrollBottom) ,在苹果上还好说,在安卓手机上的话如果一直上划的话,请求一直在进行,上拉多久请求多久,放开以后请求速度也慢,代码如下。有坑啊。。。

mounted () {

        // 添加滚动事件,检测滚动到页面底部

        window.addEventListener('scroll', this.scrollBottom)

    },

    beforeDestroy () {

        window.removeEventListener('scroll', this.scrollBottom);    //离开页面时移除

    },

methods: {

    scrollBottom () {

            this.scrollH = document.body.scrollTop||document.documentElement.scrollTop;

            this.docH = document.body.scrollHeight||document.documentElement.scrollHeight;//文档高度

            this.windowH = window.innerHeight||document.body.clientHeight||document.documentElement.clientHeight;//浏览器窗口高度

            //滚动到底部和页面没有正在执行请求网络数据的过程中的条件要同时成立才可以执行请求请求数据操作

            if((this.scrollH + this.windowH)-0 >= (this.docH-2) && !this.showLoading){

                // 发起请求前需要阻止页面滚动

                this.tip = '加载中'

                this.showloadmore = true

                // 判断请求数量是否大于合同总数

                if(this.henum <= (this.PageIndex*this.starobjectarrnum)) {

                    this.tip = '没有更多'

                    this.showloadmore = false

                    return false

                }

                this.PageIndex += 1

                console.log(this.PageIndex)

                // 加载数据

                this.loadArticle()

            } else {

                return false

            }

        },

}

后来这个去找原因找了一天。找到原因由于自己技术问题,一直解决不了。所以换了种方法。结果还是不错的,完美解决问题,ios、安卓都没问题,不说了,上代码

你可能感兴趣的:(vue+vux移动端上拉加载更多,遇到的坑)