Skip to content

inspired by iNoBounce, stop your iOS webapp from bouncing around when scrolling and more.

License

Notifications You must be signed in to change notification settings

falstack/h5-vue-scroller

Repository files navigation

Welcome to h5-vue-scroller 👋

Install

npm i h5-vue-scroller
or 
yarn add h5-vue-scroller

Usage

import Vue from 'vue'
import VScroller from 'h5-vue-scroller'
Vue.component(VScroller.name, VScroller)
<v-scroller
  tag="ul"
  :preload-top="50"
  :preload-bottom="50"
  :throttle="0"
  :event-step="1"
  @top="handleScrollTop"
  @bottom="handleLoadMore"
  @refresh="handleRefresh({ offset, event })"
  @refresh-end="handleRefreshEnd"
  @scroll="handleScroll({ offsetTop, isUp })"
>
  <slot/>
</v-scroller>

Props

  • preload-top:触发 top 的距离(px),默认50
  • preload-bottom:触发 bottom 的距离(px),默认50
  • throttle: 事件派发的频率,默认0不限流,如果设置为 < 0,则不派发事件
  • tag:指定容器的元素,默认是div
  • event-step:事件触发的步长(px),大于这个步长才会 emittop第一次refresh 事件

Events

  • void @top:滚动到屏幕顶部
  • void @bottom:滚动到屏幕底部
  • object<{ offsetTop, isUp }> @scroll 正在滚动
  • object<{ offset, event }> @refresh 下拉刷新
  • void @refresh-end:下拉刷新松手

Author

👤 falstack icesilt@outlook.com

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

License

MIT license.


This README was generated with ❤️ by readme-md-generator

About

inspired by iNoBounce, stop your iOS webapp from bouncing around when scrolling and more.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published