mint-ui 组件 Infinite scroll 滚动
分享使用该组件的一些细节,官网提供的信息不太全面
首先是安装和引入
npm i mint-ui --save 安装
引入 main.js
import { InfiniteScroll } from 'mint-ui';
Vue.use(InfiniteScroll);
使用
<div class="container">
...
<ul
v-infinite-scroll="getMore" class="soll"
infinite-scroll-disabled="loading" loading为true时,不会触发滚动
infinite-scroll-distance="10"
infinite-scroll-immediate-check="false" 为true时,初始化会默认触发一次滚动
infinite-scroll-listen-for-event="event" 初始化逻辑处理函数,可以忽略>
<li v-for="item in list">{{ item }}</li>
</ul>
</div>
Infinite scroll 栈值
Infinite scroll 触发滚动有两种方式,从中二选一
元素自身:激活InfiniteScroll组件的元素
一种是以元素自身做参照物,其子元素在内部滚动触发的逻辑
自身元素必须必定高度,不可使用100%高度,水平/垂直溢出滚动
.soll{
width: 100%;
height:100vh;
overflow-y:scroll;
}
滚动子元素,滚动到.soll底部触发滚动事件
另一种为以父元素为参照物触发的滚动逻辑(推荐)
.soll 最好是父元素的最末尾的子元素 设置infinite-scroll-distance=5,或更小
父元素必须必定高度,不可使用100%高度,水平/垂直溢出滚动
.container{
width:100%;
height:100vh;
overflow-y:scroll;
}
逻辑处理
getMore() {
this.loading = true; 事先关闭防止重复触发
setTimeout(() => {
...逻辑处理
this.loading = false; 再开启
}, 1000);
},