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 ...
随机推荐
- 如何得到WPF中控件绑定的EventTrigger
System.Windows.Interactivity.Interaction.GetTriggers(sender as DependencyObject)[0].Actions
- ActiveRecord 的类型初始值设定项引发异常
最近在研究ActiveRecord网上有很多贴子讲怎么用的.但自己照做就是出错. 最终定位在配置文件出错.应该是ActiveRecord有更新的原因.在国外的网站把配置复制了一份替换.问题解决了.我用 ...
- [poj3450]Corporate Identity(后缀数组)
题意:多个字符串的最长公共子串. 解题关键:字符串的任何一个子串都是这个字符串的某个后缀的前缀.求A和B的最长公共子串等价于求A的后缀和B的后缀的最长公共前缀的最大值. 后缀数组的经典例题,连接在一起 ...
- ural 1500 Pass Licenses (状态压缩+dfs)
1500. Pass Licenses Time limit: 2.5 secondMemory limit: 64 MB A New Russian Kolyan believes that to ...
- 细说 CSS margin
作者:https://coding.net/u/zhengkenghong原文:https://blog.coding.net/blog/css-margin 细说 CSS margin 本文着重描述 ...
- Fluuter常遇到的问题
The ADB binary found at XX is obsolete and has seriousperformance problems with the Android Emulator ...
- jsonp的使用方法
参数jsonp 和 jsonpCallback jsonp指定使用哪个名字将回调函数传给服务端,也就是在服务端通过 request.getParameter(""); 的那个名字, ...
- HDU - 6344 2018百度之星资格赛 1001调查问卷(状压dp)
调查问卷 Accepts: 1289 Submissions: 5642 Time Limit: 6500/6000 MS (Java/Others) Memory Limit: 262144 ...
- 如何選擇最佳的 Wi-Fi 無線網路頻道,獲得最佳的傳輸速度(转载)
转自:https://blog.gtwang.org/useful-tools/how-to-find-the-best-wi-fi-channel-for-your-router/
- 在Sql2005中,向表中插入数据时遇到uniqueidentifier列,如何插入数据?
Sql2005中,提供了uniqueidentifier 数据类型.说白了,就是个GUID,这种类型开发时倒是很有必要的. 今天程序中遇到了这个问题:表里定义了一个uniqueidentifier 列 ...