vue开发移动端实现上拉数据加载

最新推荐文章于 2024-04-12 17:35:46 发布

哼切滚

最新推荐文章于 2024-04-12 17:35:46 发布

阅读量339

点赞数

分类专栏： vue 移动端 h5开发文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qie1138159096/article/details/108325232

版权

滚动监听动态加载数据接口延迟请求用户体验

关键词由CSDN通过智能技术生成

vue 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

移动端

1 篇文章 0 订阅

订阅专栏

h5开发

1 篇文章 0 订阅

订阅专栏

handleScroll () {
        let _this =this
        let clientHeight = document.documentElement.clientHeight || document.body.clientHeight //获取当前手机屏幕大小
        let innerHeight = 0
        if(this.$refs.box!==undefined) {
          innerHeight = this.$refs.box.getBoundingClientRect().top//获取当前模块距离顶部的距离
        }
        if(clientHeight>innerHeight) {//判断是否下拉
          j++
          if(j==1) {
            i++;
            setTimeout(function(){
              let data = {
                page: i,
                size: 5
              };
              shopIndexVerifyList(data).then(res=>{//接口请求
                if(res.list.length!==0) {
                  _this.verifyList.push(...res.list)//内容赋值
                  _this.total = _this.verifyList.length
                  j = 0
                }
              })
            },500)
          }
        } 
      }
    },
    mounted () {
      window.addEventListener('scroll', this.handleScroll)
    },