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 下拉刷新及无限加载组件的更多相关文章

  1. Vue Scroller:Vue 下拉刷新及无限加载组件

    Vue Scroller Vue Scroller is a foundational component ofVonic UI. In purpose of smooth scrolling, pu ...

  2. jQuery WeUI 组件下拉刷新和滚动加载的实现

    最近在做手机版使用到了下拉刷新和滚动加载,记录一下实现过程: 一.引入文件 ? 1 2 3 4 <link rel="stylesheet" href="Conte ...

  3. 实现select下拉框的无限加载(懒加载)

    在实际开发中我们有时无法避免select下拉功能数据过大导致页面卡顿(如在我在一次迭代中有一个select项接口返回了5000多条数据).用户体验差!结合实际开发给出了3个解决方案: 方案1.sele ...

  4. 第三方 XListview 上拉加载、下拉刷新、分页加载和Gson解析

    注意:此Demo用的是第三方的Xlistview.jar,需要复制me文件夹到项目中,两个XML布局文件和一张图片 把下面的复制到String中 <string name="xlist ...

  5. mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)

    mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...

  6. SwipeRefreshLayout实现下拉刷新上滑加载

    1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...

  7. 微信小程序下拉刷新 并重新加载数据

    1.在json页面配置: { "enablePullDownRefresh": true } 2.调用刷新函数 onPullDownRefresh: function() { wx ...

  8. Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView

    在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...

  9. juery下拉刷新,div加载更多元素并添加点击事件(二)

    buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...

随机推荐

  1. Vue组件通信之子传父

    子组件向父组件通信主要通过自定义事件实现. 这里我记录一个小例子来帮助自己记忆. 通过点击子组件的按钮去执行父组件的函数并使用子组件传来的数据. 子组件定义如下: <template id=&q ...

  2. 丢弃掉那些BeanUtils工具类吧,MapStruct真香!!!

    在前几天的文章<为什么阿里巴巴禁止使用Apache Beanutils进行属性的copy?>中,我曾经对几款属性拷贝的工具类进行了对比. 然后在评论区有些读者反馈说MapStruct才是真 ...

  3. Qt之先用了再说系列-多线程方式1

    Qt 多线程的用法还是比较简单的,也比较好用,接下来我们就分析分析如何使用. 说起Qt 线程的使用方式,一般有2种使用方式,具体哪种比较好看自己心情了,现在有官方的推荐用法,用不用还是看你心情的 好, ...

  4. C#LeetCode刷题之#561-数组拆分 I(Array Partition I)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3718 访问. 给定长度为 2n 的数组, 你的任务是将这些数分成 ...

  5. DeepLab系列

    论文: (DeepLabV1)Semantic image segmentation with deep convolutional nets and fully connected CRFs (De ...

  6. MySQL设置跳过密码验证

    1.linux系统下 在/etc/my.cnf文件中, [mysqld]下面新增skip-grant-tables,然后重启服务器.

  7. 图论算法(四)Dijkstra算法

    最短路算法(三)Dijkstra算法 PS:因为这两天忙着写GTMD segment_tree,所以博客可能是seg+图论混搭着来,另外segment_tree的基本知识就懒得整理了-- Part 1 ...

  8. 图片降噪(Scipy)

    以登月图片为例,通过使用Scipy 傅立叶变换,实现图片消噪 scipy.fftpack模块用来计算快速傅里叶变换速度比传统傅里叶变换更快,是对之前算法的改进图片是二维数据,注意使用fftpack的二 ...

  9. unity探索者之获取设备当前电量

    很多入坑了的小伙伴应该都知道,很多时候做移动端项目都会有显示当前电池电量的需求 对于这个功能,在unity中要做的事并不多,核心方法就一个,自己做一个定时器或者直接使用协程间隔调用该方法就好了 pub ...

  10. 阿里天池 NLP 入门赛 TextCNN 方案代码详细注释和流程讲解

    thumbnail: https://image.zhangxiann.com/jung-ho-park-HbnqEhMBpPM-unsplash.jpg toc: true date: 2020/8 ...