原文??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 = 1this.bottom = 20setTimeout(() => {/* 下面2種方式都可以調(diào)用 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 - 1for (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種方式都可以調(diào)用 finishPullToRefresh 方法 */// this.$broadcast('$finishPullToRefresh')$scroller.get('myScroller').finishPullToRefresh()// this.$refs.my_scroller.finishPullToRefresh()}, 1500)},loadMore() {setTimeout(() => {let start = this.bottom + 1for (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

因本人技術(shù)有限，現(xiàn)階段僅用作記錄收藏他人作品。

總結(jié)

以上是生活随笔為你收集整理的Vue 下拉刷新及无限加载组件 - 有你便是晴天 - 博客园的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。