Vue Scroller:Vue 下拉刷新及无限加载组件
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.
Vue Scroller:Vue 下拉刷新及无限加载组件的更多相关文章
- Vue 下拉刷新及无限加载组件
原文 https://github.com/wangdahoo/vue-scroller 主题 Vue.js Vue Scroller Vue Scroller is a foundational ...
- jQuery WeUI 组件下拉刷新和滚动加载的实现
最近在做手机版使用到了下拉刷新和滚动加载,记录一下实现过程: 一.引入文件 ? 1 2 3 4 <link rel="stylesheet" href="Conte ...
- 实现select下拉框的无限加载(懒加载)
在实际开发中我们有时无法避免select下拉功能数据过大导致页面卡顿(如在我在一次迭代中有一个select项接口返回了5000多条数据).用户体验差!结合实际开发给出了3个解决方案: 方案1.sele ...
- 第三方 XListview 上拉加载、下拉刷新、分页加载和Gson解析
注意:此Demo用的是第三方的Xlistview.jar,需要复制me文件夹到项目中,两个XML布局文件和一张图片 把下面的复制到String中 <string name="xlist ...
- mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)
mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...
- SwipeRefreshLayout实现下拉刷新上滑加载
1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...
- 微信小程序下拉刷新 并重新加载数据
1.在json页面配置: { "enablePullDownRefresh": true } 2.调用刷新函数 onPullDownRefresh: function() { wx ...
- Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView
在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...
- juery下拉刷新,div加载更多元素并添加点击事件(二)
buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...
随机推荐
- JQuery Mobile的页面
1.JQuery Mobile的页面结构如下图: page:是在浏览器中显示的页面 header:创建页面上方的工具栏(常用于标题和搜索按钮) content:定义了页面的内容,比如文本, 图片,表单 ...
- POJ1195(二维树状数组)
Mobile phones Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 17176 Accepted: 7920 De ...
- POCO库中文编程参考指南(11)如何使用Reactor框架?
1 Reactor 框架概述 POCO 中的 Reactor 框架是基于 Reactor 设计模式进行设计的.其中由 Handler 将某 Socket 产生的事件,发送到指定的对象的方法上,作为回调 ...
- Redis多个数据库
注意:Redis支持多个数据库,并且每个数据库的数据是隔离的不能共享,并且基于单机才有,如果是集群就没有数据库的概念. Redis是一个字典结构的存储服务器,而实际上一个Redis实例提供了多个用来存 ...
- AR/VR-VR:VR
ylbtech-AR/VR-VR:VR 虚拟现实技术是一种可以创建和体验虚拟世界的计算机仿真系统,它利用计算机生成一种模拟环境,是一种多源信息融合的.交互式的三维动态视景和实体行为的系统仿真使用户沉浸 ...
- cocos2d-x CCHttpRequest获取网络图片并显示
转自:http://www.cnblogs.com/hzj730/p/3178431.html //图片结构 class imgstruct : public CCObject { public: i ...
- Repeater 和 GridView 添加序列号
<tr><asp:Repeater ID="rptOfBrowerInfo" runat="server" > <Heade ...
- K-S Test
K-S test, test for the equality of continuous, one-dimensional probability distribution that can be ...
- 泛型(Generic)
当集合中存储的对象类型不同时,那么会导致程序在运行的时候的转型异常 import java.util.ArrayList; import java.util.Iterator; public clas ...
- API---CreateIoCompletionPort
HANDLE WINAPI CreateIoCompletionPort( __in HANDLE FileHandle, __in HANDLE Existi ...