@zestia/ember-simple-infinite-scroller
This Ember addon provides a simple component that fires an action whenever it is scrolled to the bottom.Allowing you to load more data. It is not coupled to Ember-Data like some other infinite scrolling implementations.
Installation
ember install @zestia/ember-simple-infinite-scroller
Demo
https://zestia.github.io/ember-simple-infinite-scroller/
Example
Notes
- Does not use jQuery ✔︎
- Ember Data Friendly ✔︎
- Supports use with FastBoot ✔︎
- No included styles ✔︎
Configuration
| Argument | Description | Default |
|---|---|---|
| onLoadMore | Action to perform when the @percent scrolled is reached |
null |
| element | Monitors the scroll position of the given element | null |
| percent | Distance scroll from the top for when to fire the load more action | 100 |
| debounce | Milliseconds delay for when to check if more needs to be loaded | 100 |
Yielded API
The component will yield a hash that provides:
| Property | Description |
|---|---|
| setElement | Sets the element for which to monitor the scroll position of |
| isLoading | True when the promise for more data has not resolved yet |
| isScrollable | True when scroll element is overflowing |
| loadMore | Action for manually loading more |
Testing
A test helper is provided to help scrolling your element. Example:
import { scrollToPercentage } from '@zestia/ember-simple-infinite-scroller/test-support/helpers';
test('loading more', async function() {
await visit('/')
await scrollToPercentage('.infinite-scroller', 100);
// ...
})
Performance
Please read: https://github.com/TryGhost/Ghost/issues/7934
You may need to add this to app/app.js
customEvents = {
touchstart: null,
touchmove: null,
touchend: null,
touchcancel: null
};
Scenario to be aware of
If your scrollable element is displaying 10 things, but they don't cause the element to overflow,then the user won't ever be able to load more - because they won't be able to scroll and thereforethe onLoadMore action will never fire.
To account for this, you can display a button for manually loading more...
-
示例： main.js部分： 先引入mintui,再引入Infinite scroll import Mint from 'mint-ui'; import 'mint-ui/lib/style.css' Vue.use(Mint); import { InfiniteScroll } from 'mint-ui'; Vue.use(InfiniteScroll); html部分： <div c
-
Scroller的基本用法 Scroller用于View的滑动，其基本原理还是ScrollTo/ScrollBy。Scroller在其基础上把滑动的位移切分成无数细小的单元，并在一个时间段内对其进行位移，使View的滑动看起来具有平滑的效果。 Scroller的一般使用要结合View的ComputeScroll方法。这个方法默认会在View的draw方法（我们一般重写的是onDraw方法，
-
芋的比例高一点，1850年的小土豆，年轻普普，和年轻但是已经老了的奥。这仨一开口就可以去讲相声！ ---- 普鲁士人跪在维也纳的皇宫里，双手被绑住了，衣服上都是灰，翘卝起来的头发也因为路途颠簸和不友好的“护送”而平了下去。原本守候在这里的仆人都被遣散了，午后二时的冬天很安静，连鸟扑棱翅膀的声音都没有，而偌大的空间里只有奥地利和普鲁士两个人，他们要是弄出点什么声响倒是听得很清晰。结束午睡的小路德维希
-
Ember Simple Auth API docs Ember Simple Auth supports all Ember.js versions starting with 3.0.Node 12 is required Ember Simple Auth Ember Simple Auth is a lightweight library for implementing authenti
-
Ember Simple Auth Token This is Ember addon is an extension to the Ember Simple Auth library that provides a basic token authenticator, a JSON Web Tokens token authenticator with automatic refresh cap
-
无限滚动指令。 引入 import { InfiniteScroll } from 'mint-ui'; Vue.use(InfiniteScroll); 例子 为 HTML 元素添加 v-infinite-scroll 指令即可使用无限滚动。滚动该元素，当其底部与被滚动元素底部的距离小于给定的阈值（通过 infinite-scroll-distance 设置）时，绑定到 v-infinite
-
Haralan Dobrev 开发的 Infinite scroll 是一款帮助用户快速，双向的不断进行分页的 jQuery 插件。 Features Progressive enhancement -应用于现有的 pagination anchors。 Bi-directional -用户可以将其用于向上和向下滚动。 Fast scrolling -不监听scroll事件，因此使用 hardware scrolling。
-
实现无限循环滚动的ScrollView，即ScrollView滚动到最后一页，继续滚动的时候将滚动到第一页。 [Code4App.com]
-
实现可以左右滑动的tab bar，从而可以放置更多tab。当bab bar上的tab比较多时，可以使用这种tab bar。 [Code4App.com]