Vue Scroller:Vue 下拉刷新及无限加载组件

Vue Scroller Vue Scroller is a foundational component ofVonic UI In purpose of smoo

Vue Scroller

Vue Scroller is a foundational component ofVonic UI. In purpose of smooth scrolling, pull to refresh and infinite loading.

Demo

Change Logs

  • v0.3.9 add getPosition method for scroller instance.
  • v0.3.8 fix bug
  • v0.3.7 publish bower version
  • v0.3.6 support mouse events
  • v0.3.4 change required property 'delegate-id' to non-required.
  • v0.3.3 support multi scrollers in one page.

How To Use

Step 1: create vue project and install vue-scroller via npm. (we use vue webpack-simple template here)

$ vue init webpack-simple#1.0 my-project

$ cd my-project

$ npm install

$ npm install vue-scroller

Step 2: add resolve option and loader in webpack.config.js as below.

module.exports = {

// ...

resolve: {

extensions: ['', '.js', '.vue'],

fallback: [path.join(__dirname, './node_modules')]

},

// ...

module: {

loaders: [

// ...

{

test: /vue-scroller.src.*?js$/,

loader: 'babel'

}

]

},

// ...

}

Step 3: copy codes below to overwrite App.vue

<template>

<scroller delegate-id="myScroller"

:on-refresh="refresh"

:on-infinite="loadMore"

v-ref:my_scroller>

<div v-for="(index, item) in items" @click="onItemClick(index, item)"

class="row" :class="{'grey-bg': index % 2 == 0}">

{{ item }}

</div>

</scroller>

</template>

<script>

import Scroller from 'vue-scroller'

export default {

components: {

Scroller

},

data () {

return {

items: []

}

},

ready() {

for (let i = 1; i <= 20; i++) {

this.items.push(i + ' - keep walking, be 2 with you.')

}

this.top = 1

this.bottom = 20

setTimeout(() => {

/* 下面2种方式都可以调用 resize 方法 */

// 1. use scroller accessor

$scroller.get('myScroller').resize()

// 2. use component ref

// this.$refs.my_scroller.resize()

})

},

methods: {

refresh() {

setTimeout(() => {

let start = this.top - 1

for (let i = start; i > start - 10; i--) {

this.items.splice(0, 0, i + ' - keep walking, be 2 with you.')

}

this.top = this.top - 10;

/* 下面3种方式都可以调用 finishPullToRefresh 方法 */

// this.$broadcast('$finishPullToRefresh')

$scroller.get('myScroller').finishPullToRefresh()

// this.$refs.my_scroller.finishPullToRefresh()

}, 1500)

},

loadMore() {

setTimeout(() => {

let start = this.bottom + 1

for (let i = start; i < start + 10; i++) {

this.items.push(i + ' - keep walking, be 2 with you.')

}

this.bottom = this.bottom + 10;

setTimeout(() => {

$scroller.get('myScroller').resize()

})

}, 1500)

},

onItemClick(index, item) {

console.log(index)

}

}

}

</script>

<style>

html, body {

margin: 0;

}

* {

box-sizing: border-box;

}

.row {

width: 100%;

height: 50px;

padding: 10px 0;

font-size: 16px;

line-height: 30px;

text-align: center;

color: #444;

background-color: #fff;

}

.grey-bg {

background-color: #eee;

}

</style>

Step 4: add viewport meta in index.html

<meta name="viewport" content="width=device-width, user-scalable=no">

Step 5: run the project

$ npm run dev

Scroller instance API

Methods

  • resize :Void
  • triggerPullToRefresh :Void
  • Void finishPullToRefresh :Void
  • scrollTo(x:Integer, y:Integer, animate:Boolean) :Void
  • scrollBy(x:Integer, y:Integer, animate:Boolean) :Void
  • getPosition :Object

That's it, have fun.

未登录用户
全部评论0
到底啦