Vue 下拉刷新及無限加載組件

原文   https://github.com/wangdahoo/vue-scroller

主題  Vue.js

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