vue-infinite-loading使用demo
2017-05-25 14:49
525 查看
vue-infinite-loading官网:https://peachscript.github.io/vue-infinite-loading/
安装:
list.vue页面
安装:
npm install vue-infinite-loading --save
list.vue页面
<template> <div class="list-con"> <div class="list" v-for="(item,key) in list"> <span v-text="key+1"></span> <p> <a :href="item.url">{{item.title}}</a> </p> </div> <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading"> <span slot="no-more">没有更多消息了</span> </infinite-loading> </div> </template> <script> import InfiniteLoading from 'vue-infinite-loading'; const api = 'http://hn.algolia.com/api/v1/search_by_date?tags=story'; export default { components: { InfiniteLoading, }, data() { return { list: [] } }, mounted: function() { }, methods: { onInfinite() { let params = { page: this.list.length / 20 + 1 } this.$http.get(api, params).then((res) => { if (res.data.hits.length) { this.list = this.list.concat(res.data.hits); this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded'); if (this.list.length / 20 === 10) { this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete'); } } else { this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete'); } }) } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .list{ overflow:hidden; margin:20px 0; } span{ float: left; margin-right: 5px; } p{ float: left; } </style>
相关文章推荐
- 使用vue路由做出一个可以切换的demo
- vue---使用vue编写插件,基于vue2.x编写常用toast loading插件,一键复用组件
- layer加载遮罩层使用 Ajax Loading Demo
- (五)vue开发 - 使用 vue-layer-mobile组件实现toast,loading效果
- 使用vue-infinite-scroll实现无限滚动效果
- vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
- vue下拉加载插件 之vue-infinite-loading
- Vue中的无限加载vue-infinite-loading的方法
- vue 项目中使用Loading组件的示例代码
- (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法
- vue-infinite-loading2.0 中文文档
- vue-infinite-loading2.0 中文文档详解
- 详解vue使用vue-layer-mobile组件实现toast,loading效果
- EasyMF Demo之 Tools工具的使用
- ASP.NET DEMO 14: 如何在 GridView/DataGrid 模板列中使用自动回发的 CheckBox/DropDownList
- 从TFTPDemo看文件流FileInputStream/FileOutputStream的使用
- IbatisNet的使用学习体会(附demo)
- cglib 介绍 原理 使用 demo examples
- [Tool]手动绘制loading效果(不使用图片)
- ASP.NET DEMO 14: 如何在 GridView/DataGrid 模板列中使用自动回发的 CheckBox/DropDownList