mint ui分页无限滑动问题

mint-ui Infinite scroll 重复加载、加载无效的原因及解决方案

	</h1>
	<div class="clear"></div>
	<div class="postBody">

1.无限滚动的运用场景：

一般运用在列表展示，有分页、下拉加载更多的需求中。

2.代码分析

代码很简单，实现了列表分页，数据加载完之后显示数据状态

<template>
 <div class="list-data" 
    v-infinite-scroll="loadMore" 
    infinite-scroll-disabled="loading"     
    infinite-scroll-distance="10">
      <equipment-list :list="list"></equipment-list>
      <div class="loading" v-if="loading">
         <span id="load-text">{{loadText}}</span>
      </div>
 </div>
</template>
<script>
    import { findPage } from '@/api/api'
    import EquipmentList from 'common/list/EquipmentList.vue'
    export default {
        data(){
            return {
               loading:false,
               loadText:'正在加载...',
               list: [],
               param: {
                 pageIndex: 0,
                 pageSize: 10
               }
         },
         components:{
            EquipmentList
         },
         methods: {
            getList(callBack){
               findPage(this.param).then(response => {
                  if(response.ret){
                    let data = response.datas
                    if(!data){data = []}
                </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;"> 上次list的长度</span>

let len = this.list.length

                </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;"> 拼接数据</span>
                <span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.list </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.list.concat(data)

                </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;"> (data </span><span style="background-color: #f5f5f5; color: #000000;">&amp;&amp;</span><span style="background-color: #f5f5f5; color: #000000;"> data.length </span><span style="background-color: #f5f5f5; color: #000000;">==</span> <span style="background-color: #f5f5f5; color: #000000;">0</span> <span style="background-color: #f5f5f5; color: #000000;">&amp;&amp;</span> <span style="background-color: #f5f5f5; color: #000000;">!</span><span style="background-color: #f5f5f5; color: #000000;">len) {
                  </span><span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.loadText </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">没有找到相关数据</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">
                } </span><span style="background-color: #f5f5f5; color: #0000ff;">else</span> <span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;"> (data </span><span style="background-color: #f5f5f5; color: #000000;">&amp;&amp;</span><span style="background-color: #f5f5f5; color: #000000;"> data.length </span><span style="background-color: #f5f5f5; color: #000000;">&lt;</span> <span style="background-color: #f5f5f5; color: #000000;">10</span><span style="background-color: #f5f5f5; color: #000000;">) {
                  </span><span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.loadText </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">暂无更多数据</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">
                } </span><span style="background-color: #f5f5f5; color: #0000ff;">else</span><span style="background-color: #f5f5f5; color: #000000;"> {
                  </span><span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.loading </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">false</span><span style="background-color: #f5f5f5; color: #000000;">
                }

                callBack </span><span style="background-color: #f5f5f5; color: #000000;">&amp;&amp;</span><span style="background-color: #f5f5f5; color: #000000;"> callBack()
              }
            },reject </span><span style="background-color: #f5f5f5; color: #000000;">=&gt;</span><span style="background-color: #f5f5f5; color: #000000;"> {})
        },
        loadMore() {
           </span><span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.loading </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">true</span>
           <span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.param.pageIndex </span><span style="background-color: #f5f5f5; color: #000000;">+=</span> <span style="background-color: #f5f5f5; color: #000000;">1</span>
           <span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.getList()
        }
     }
 }

</script>
<style>
.list-data{
height: 100%;
overflow-y: auto;
}
</style>

 

参考mint-ui官网介绍

1.为HTML元素添加v-infinite-scroll指令即可使用无限滚动。

2.滚动该元素，当其底部与被滚动元素底部的距离小于给定的阈值（通过infinite-scroll-distance设置）时，绑定到 v-infinite-scroll 指令的方法就会被触发。

3.infinite-scroll-disabled若为真，则无限滚动不会被触发，默认为false。

4.infinite-scroll-immediate-check若为真，则指令被绑定到元素上后会立即检查是否需要执行加载方法。在初始状态下内容有可能撑不满容器时十分有用。默认为true。

 

但是，3和4实际效果却和官网描述有出入，实际效果：实际效果：实际效果：

1.为HTML元素添加 v-infinite-scroll 指令即可使用无限滚动。

2.滚动该元素，当其底部与被滚动元素底部的距离小于给定的阈值（通过infinite-scroll-distance设置）时，绑定到 v-infinite-scroll 指令的方法就会被触发。

3.infinite-scroll-disabled 若为真，如果上次加载的数据没有撑满容器，则立即再次执行绑定到 v-infinite-scroll 指令的方法（loadMore），直到数据撑满容器为止。在初始状态下内容有可能撑不满容器时十分有用，默认为false。

4.infinite-scroll-immediate-check，若为真 则指令被绑定到元素上后会立即执行加载方法（loadMore），默认为true。

 

填坑

1.重复加载。初次进入列表页，会加载两次或者多次数据

造成重复加载的原因，罪魁祸首是infinite-scroll-disabled，在 loadMore 方法里 有一句 this.loading = true，把infinite-scroll-disabled的值设置为了true，

它的作用就是，当你进入页面是，会检查如果第一次请求的数据没有撑满你的容器（list-data），就会立即再次执行v-infinite-scroll 绑定的方法（loadMore），第二次没有撑满，会执行第三次。。。。。。

2.滚动时，不起作用

这种情况，就是在loadMore方法里没有写this.loading = true，同时，第一次加载的数据也没有撑满容器。而我们的样式设置：

?

1 2 3 4

.list-data{      height : 100% ;      overflow-y: auto ; }

根本原因是因为，数据没有撑满容器就不会有滚动效果，所以就不会起作用了。

所以解决方案 就是要出现滚动条 ！！！ 容器高设置的小一点，或者每页的数据多一点。

 

注：

1.为什么没有在created 里调用一次getlist方法？为什么pageIndex 默认为0？

因为infinite-scroll-immediate-check默认为 true，进入页面会直接调用loadMore 。

2.容器的样式需要设置height和 允许滚动overflow-y:auto;