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 ...
随机推荐
- SimpliciTI协议地址分配
1.多个ED节点和AP正确连接后,AP都会给ED分配一个相应的地址.当某个ED出现意外,比如电源问题,和AP断开连接,AP并不将该ED节点的地址消除.当该ED恢复正常,重新申请加入网络时,AP会检测该 ...
- 六 Vue学习 首页 (下)
一:Store介绍: state: 相当于数据 action: action去commit mutations mutation: 只有mutation 才能改变state 例: const stor ...
- Swiper 滑动切换图片(可用于PC端,移动端)
作为一名后端的普通程序猿, 你让我搞这种前端不是跟我玩命吗,所以用插件来搞,省事又简单,而且Swiper使用又简单是吧: 头皮发麻,不喜欢说废话,我更喜欢直接看到效果: 按Swiper官方文档来说, ...
- ant错误 reference classes not found
使用ant提示reference classes not found错误 原因是 里面的一些属性的值要用on或者yes或者off或者no..用成其他,例如true,false的话就会有这个提示..
- 51nod1117(简单huffman tree)
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1117 题意:中文题诶- 思路:简单huffman tree ...
- 蓝桥杯T37(nim博弈)
题目链接:http://lx.lanqiao.cn/problem.page?gpid=T37 题意:中文题诶- 思路:nim博弈 个人感觉这题最难的地方是将题目转换为博弈模型,如果能将之转换为博弈模 ...
- 洛谷P1587 [NOI2016]循环之美
传送门 不会,先坑着 https://kelin.blog.luogu.org/solution-p1587 //minamoto #include<cstdio> #include< ...
- Java-GC-标记清除算法
## 前置知识 静态变量在类被加载的时候分配内存.当我们启动一个App的时候,系统会创建一个进程,此进程会加载一个JVM的实例,然后代码就运行在JVM之上.也就是说类在被加载的时候,静态变量 --- ...
- Ajax案例:异步加载后台订单详情信息
- Hexo - 记录一次Pages服务部署失败的原因
问题与分析 某天忽然发现,一直运行得好好的Pages服务部署失败了,GitHub Pages报错如下: Your site is having problems building: The tag c ...