zoukankan      html  css  js  c++  java
  • 纯JS实现加载更多(VUE框架)

    <template>
        <div class = 'car_list' reft='scrollobx' @scroll='scrollready($event)'>
        </div>
    </template>
    <script>
        export default {
            data() {
                return  {
                    lengthThreshold: 50, //当滑动到距离低端50px时,更新数据
                    timeThreshold: 300, 
                    promise: null
                }
            },
            methods: {
                // 滚动加载列表
                scrollready() {
                    if(this.shouldScroll()) {
                        if (this.promise) {
                            return;
                        }
                        // 进行加载
                        this.fn();
                        // 防止多次滑动,频繁请求后台资源
                        let self = this;
                        this.promise = setTimeout(() => {
                            self.promise = null;
                        }, this.timeThreshold);
                    }
                },
                // 调用父组件请求资源服务
                fn() {
                    this.$emit('scrollChange');
                },
                shouldScroll() {
                    if(document.scrollTop === 0) {// 滑动距离为0,还没开始滑动
                        return false;
                    }
    // 列表高度 - 列表可视高度 - 滑动的高度 < 50px , 则加载更多 return this.$refs.scrollbox.scrollHeight - this.$refs.scrollbox.clientHeight - this.$refs.scrollbox.scrollTop < this.lengthThreshold; }, } } </script>

    父组件的请求服务方法:

    queryCarApplyShareList() {
            this.Load = true;
            CarResources.methods.queryCarApplyShareList(this.http, this.pageNo, this.pageSize).then((res) => {
              if (res && res.status === 200) {
                   if (this.pageNo === 1) { // 加载第一页数据
                       this.CarList = res.data || [];
                   } else { // 加载更多
                      this.CarList = this.CarList.concat(res.data);
                   }
                   this.IsLastPage = res.data.length === 0
              }
              this.Load = false;
           }, () => {
              this.Load = false;
              console.log('接口报错');
           });
    },
    

      

    不安逸,不浮躁,牛B就是一个学习累积的过程
  • 相关阅读:
    jquery键盘事件
    如何将奇艺、优酷等平台的视频嵌入到项目中
    ubuntu 10.04 常用 设置
    博客风格收集
    多张图片上传预览
    动态计算输入框字符个数
    Ubuntu Linux下设置IP的配置命令
    js事件浏览器兼容
    开源软件下载站
    PHPstrom的一个小技巧
  • 原文地址:https://www.cnblogs.com/pengshengguang/p/7815589.html
Copyright © 2011-2022 走看看