Mint UI 的 Infinite scroll 无限滚动组件 一直触发 loadMore

项目中有用到  Infinite scroll  无限滚动组件

发现一个神奇的问题,

loadMore 一直无限触发,黑人问号 ???

几经百度,谷歌,终于解决l,

此文仅做记录

话不多说,直接看问题

官方地址:http://mint-ui.github.io/#!/zh-cn

import

import { InfiniteScroll } from ‘mint-ui‘;

Vue.use(InfiniteScroll);

HTML:

<ul
  v-infinite-scroll="loadMore"
  infinite-scroll-disabled="loading"
  infinite-scroll-distance="10">
  <li v-for="item in list">{{ item }}</li>
</ul>

JS:

loadMore() {
  this.loading = true;
  setTimeout(() => {
    let last = this.list[this.list.length - 1];
    for (let i = 1; i <= 10; i++) {
      this.list.push(last + i);
    }
    this.loading = false;
  }, 2500);
}

解决方法:

  包含的UI 需要设置固定的高度,或者与视图同高,height:100%

顺便推荐一个gif录制软件,轻量级,操作方便,免安装,good

GifCam

官网地址:http://blog.bahraniapps.com/gifcam/#download

原文地址:https://www.cnblogs.com/CaktyRiven/p/10954562.html

时间: 2024-11-09 03:22:18

Mint UI 的 Infinite scroll 无限滚动组件 一直触发 loadMore的相关文章

上拉、下拉无限滚动组件-pc端

场景: web项目,聊天记录历史搜索.需要支持上拉无限加载,下拉无限加载. 目标: 支持所需场景:可配置. 难点: 顶部无限滚动很麻烦,网上没找着好的解决方案.刚开始 顶部也想使用 IntersectionObserver 特性来做,但二次触发比较麻烦,后来改用监听 scroll 事件.问题又来了,滚动条一直处于顶部,无法保持原来的位置. 本例解决方案是:利用 scrollIntoViewIfNeeded 特性,在组装列表完成后,手动调用,使其滚动到 原来的列表项位置. 成品效果: 凑合能用,O

一个封装好的iOS无限滚动组件HXInfiniteScrollView

无限滚动组件封装 特点 1.一句话就可以生成1个无限滚动视图,传入数据源和内容视图生成方法即可 2.使用AutoLayout构建,全自适应,内容页自动跟随滚动视图变化,无需任何frame调整 HXInfiniteScrollView *infiniteScrollView=[[HXInfiniteScrollView alloc]initWithDataSource:@[@"数据1",@"数据2",@"数据3",@"数据4"]

vue mint ui 手册文档对于墙的恐惧

npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用. <!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"><!-- 引入

Infinite Scroll - jQuery &amp; WP 无限滚动插件

无限滚动(Infinite Scroll)也成为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll  这款 jQuery & WordPress 无限滚动插件可以帮助你轻松实现这个效果. 插件下载     效果演示 下面是所有的配置选项: $('.selector').infinitescroll({ loading: { finished: undefined, finishedMsg: "&l

Android 高级UI设计笔记09:Android如何实现无限滚动列表

ListView和GridView已经成为原生的Android应用实现中两个最流行的设计模式.目前,这些模式被大量的开发者使用,主要是因为他们是简单而直接的实现,同时他们提供了一个良好,整洁的用户体验. 对于ListView和GridView一个共同基本要求是:当用户向下滚动时可以动态加载数据支持无限滚动.下面教你如何在自己的应用中实现这个特性. 具体流程如下: (1)我们需要的一个主要组件是InfiniteScrollListener类,它实现了OnScrollListener接口.让我们直接

基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表的函数, 代码如下: html: //父组件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=

vue2.0无限滚动加载数据插件

  做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装:npm install vue-infinite-loading –save 引入 ES6 import InfiniteLoading from 'vue-infinite-loading'; export default { components: { InfiniteLoading, }, }

jquery实现无限滚动瀑布流实现原理

现在类似于pinterest这类的表现效果很火,其实我比较中意的是他的布局效果,而不是那种瀑布流. 虽然我不是特别喜欢这种瀑布流的表现样式,但是还是写了几篇关于无限滚动瀑布流效果的文章,Infinite scroll+Masonry=无限滚动瀑布流,infinite-scroll-jquery滚动条(下拉)加载数据插件之类的文章.可能是我表达描述不是很详细清楚,所以好多朋友看了不是很清楚,并发信给我求解释.所以有了今天这篇文章. 其实早在:十几款jquery无限滚动插件这 篇文章中我就提到过这种

LoopBar: Tap酒吧与无限滚动

相约工具栏 - 标签栏与无限滚动为Android由Cleveroad 在Cleveroad我们最近认识到通过使用任何一个应用程序类别的导航,导航面板是很无聊和琐碎.这就是为什么我们的设计师的创意武装,我们向您介绍了基于Android的应用,我们的新组件 - LoopBar.当时的想法是让导航菜单就在指纹,在标签栏.更重要的是认为有一些特定的功能,使其从类似的人群中脱颖而出.因此,尝试在你的应用程序的LoopBar库,你会看到其中的差别. 如果你努力创造不寻常的外观和导航的应用程序,欢迎你使用循环