vue mint-ui加载上拉加载，分页

叁歲伎倆 2023-02-13 11:30 17阅读 0赞

## vue mint-ui加载上拉加载， 分页 ##

//参考 demo 对应的代码，第二个链接，data 设置个 pageIndex:0 ,created 的时候获取第一页的数据，放进 list 里，loadBottom方法里pageIndex++，获取下一页
    export default { 
    
        data() { 
    
          return { 
    
            list: [],
    
            allLoaded: false,
    
            bottomStatus: '',
    
            wrapperHeight: 0,
    
            pageIndex: 1,
    
            pageSize:10
    
          };
    
        },
    
        methods: { 
    
          handleBottomChange(status) { 
    
            this.bottomStatus = status;
    
          },
    
          loadBottom() { 
    
            this.pageIndex++
    
            getDataFromServer()
    
          },
    
          getDataFromServer(){ 
    
              var vm = this
    
              //后台获取某页数据，以下为成功回调函数里的代码，假设返回为{data:[],total:30}
    
              vm.list = vm.list.concat(res.data)
    
              if(vm.list.length===total){ 
    
                  vm.allLoaded = true
    
              }
    
              vm.$refs.loadmore.onBottomLoaded();
    
          }
    
        },
    
        created() { 
    
          getDataFromServer()
    
        },
    
        mounted() { 
    
          this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
    
        }
    
      };

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQ自动加载函数: 分页加懒加载

JS: var _page = 1, _words = '', _loadDone = false; //当滚动条即将到达底部自动加载数据

Dear 丶/ 2023年02月20日 07:08/ 0 赞/ 45 阅读

相关 vue mint-ui加载上拉加载，分页

vue mint-ui加载上拉加载，分页 //参考 demo 对应的代码，第二个链接，data 设置个 pageIndex:0 ,created 的时候获取第一

叁歲伎倆/ 2023年02月13日 11:30/ 0 赞/ 18 阅读

相关 uni-app分页上拉加载数据刷新

前提我这边和后端同事沟通的逻辑是上拉一次（也就是分页一次） pageIndex+1 pageSize 10 条数据不变 onReachBotto

喜欢ヅ旅行/ 2022年12月03日 11:30/ 0 赞/ 225 阅读

相关 vue 移动端加载更多分页组件_vue 分页加载数据页面滚动加载更多

组件源码 .vue文件 style="height:100%;overflow:auto" ref="filesTable" > ref="tableInner" c

小灰灰/ 2022年10月26日 14:09/ 0 赞/ 323 阅读

相关 php 上拉加载下拉刷新页面,上拉加载，下拉刷新（即分页功能）

Hello APP \contant\{ \} .ids\{ text-align: center; margin-bottom: 5px; border-bott

约定不等于承诺〃/ 2022年10月21日 12:53/ 0 赞/ 344 阅读

相关 ListView分页加载

技术要点：源码地址：http://download.csdn.net/detail/anlidengshiwei/8576857[点击打开链接][Link 1] 1、对于

深碍√TFBOYSˉ_/ 2022年08月07日 12:38/ 0 赞/ 257 阅读

相关 XListView 下拉刷新上拉分页加载更多

Xlistview 项目主要是三部分：XlistView,XListViewHeader,XListViewFooter，分别是XListView主体、Header、Foote

迷南。/ 2022年06月08日 02:08/ 0 赞/ 360 阅读

相关 vue上拉加载

最近写移动端，需要用到上拉加载的效果，由于我自己写的触摸事件在微信上遇到点小问题，所以还是借用组件来完成了。朋友推荐了这个组件，感觉还不错： vue-impressio

我就是我/ 2022年06月07日 09:39/ 0 赞/ 207 阅读

相关 vue 上拉加载更多数据 / 分页

加载状态 <div v-if='has_log == 0'> <load-more tip="上拉加载" :show-loading="fals

冷不防/ 2022年03月20日 07:09/ 0 赞/ 534 阅读

相关上拉加载篇

1、如何判断是否已经加载完数据 (1)通过判断页面获取到的数据数量和页面平均获取到的数据判断,比如每个页面返回10条,最后一个页面不到10条 (2)在知道总

悠悠/ 2021年07月24日 20:21/ 0 赞/ 456 阅读