Vue Simple Scroll

Vue Simple Scroll High-performance rolling Vue components, refresh and unlimited load.

Demo

https://github.com/machaosuper/vue-simple-scroll

or

# install dependencies
npm install

# serve with hot reload at localhost:9000
npm run dev

# build for production with minification
npm run build

How to use

npm i vue-simple-scroll --save

/* ignore this if you include vue-scroller.js by <script> tag from a cdn, such as unpkg */
import Vue from 'vue'
import vueSimpleScroll from 'vue-simple-scroll';
Vue.use(vueSimpleScroll);

<simple-scroll
  :on-refresh="refresh"
  :on-infinite="infinite">
  <!-- content goes here -->
</simple-scroll>

Webpack project by vue-cli

https://github.com/machaosuper/vue-simply-scroll

API

vue-simple-scroll component attributes:

| 属性名 | 相关描述 | 类型 | 默认值 | |-----|-----|-----|-----| | onRefresh | 下拉刷新的回调函数 | Function | - | | onInfinite | 上拉加载更多的回调函数 | Function | - | | isRefreshText | 下拉刷新是否显示文字提示 | Boolean | true | | noDataText | 上拉加载更多没有数据时显示 | String | 我是有底线的~~ | | infiniteLoadingText | 上拉加载更多加载中文字 | String | 加载中 | | offset | 内容区位于顶部的偏移量 | Number | 0 | | distance | 滑动距离底部多少开始加载 | Number | 0 | | refreshLayerColor | 下拉刷新图标和字的颜色 | String | #ff6863 | | loadingLayerColor | 上拉加载更多图标和字的颜色 | String | #ff6863 |

vue-simple-scroll vm instance methods:

• scrollTop(y:Integer) 内容滚动到指定位置
• getPosition() 获取当前滚动的距离
• resetInfinite() 重置上拉加载更多当前状态
• setInfiniteStatus(b:Boolean) 设置上拉加载更多当前状态, true：已经到最后一页，false：反之