mint-ui 组件 Infinite scroll 滚动

最新推荐文章于 2021-02-02 18:32:22 发布

与猪为伴

最新推荐文章于 2021-02-02 18:32:22 发布

阅读量1.1k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_37011713/article/details/99550392

版权

本文详细介绍了Mint-UI中Infinite Scroll组件的使用，包括安装、引入及两种滚动逻辑的实现，特别是以元素自身和父元素为参照物的触发方式，并强调了设置合适的infinite-scroll-distance的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
},