Vue 下拉刷新及无限加载组件
2017-02-23 16:52
309 查看
原文 https://github.com/wangdahoo/vue-scroller
主题 Vue.js
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.
主题 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
相关文章推荐
- Vue Scroller:Vue 下拉刷新及无限加载组件
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
- better-scroll上拉加载 和下拉刷新 的使用(基于vue写成组件的形式)
- Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
- banner实现无限轮播+下拉刷新上拉加载+ 下拉时 listview 和轮播图一起刷新
- require.js 加载 vue组件 r.js 合并压缩的实例
- 自定义View——利用下拉刷新组件实现上拉加载
- RecyclerView的上拉加载下拉刷新和viewpager自动有点无限轮播
- 实现一个简单的vue无限加载指令方法
- Vue异步加载about组件
- require.js 加载 vue组件 r.js 合并压缩
- vue按需加载组件webpack require.ensure的方法
- vue loadmore 组件滑动加载更多源码解析
- require异步加载vue组件可能导致的问题
- Android打造(ListView、GridView等)通用的下拉刷新、上拉自动加载的组件
- vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
- vue-cli监听组件加载完成
- vue路由组件按需加载的几种方法小结
- mescroll.js上拉加载下拉刷新组件使用详解
- jquery加载单文件vue组件