vue插件vue-infinite-loading 加载更多用法
首先先下载
npm install vue-infinite-loading –save
下载完成后
在需要用的页面引入该组件
import InfiniteLoading from \’vue-infinite-loading\’;
然后注册组件
components: {
InfiniteLoading,
}
写一个方法
methods: { onInfinite() {//写一个方法 var _this = this; var pagesize=3; _this.page+=1; axios.get(\'../../static/json/homelist.json\').then(function(data) { if(data.data.DoubanHeadlines.length>0) { if(pagesize*(_this.page)>=data.data.DoubanHeadlines.length) { _this.$refs.infiniteLoading.$emit(\'$InfiniteLoading:complete\');//停止加载 }else{ for(var i=pagesize*((_this.page)-1);i<pagesize*(_this.page);i++){ _this.homelist.push(data.data.DoubanHeadlines[i]) ; _this.$refs.infiniteLoading.$emit(\'$InfiniteLoading:loaded\');//加载 } } } else { console.log("3+:" + _this.homelist.length) _this.$refs.infiniteLoading.$emit(\'$InfiniteLoading:complete\'); } }).catch(function() { console.log("ajax error") }); }, }
在dom结构中加入
<infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">//调用方法
<span slot="no-more">//停止后显示的内容
已经没有啦~~
</span>
</infinite-loading>
完整例子
<template> <div> <div class="flex_40"> <div> <ul> <li> <a>影院热映</a> </li> <li> <a>欧美新榜</a> </li> <li> <a>注册账号</a> </li> <li> <a>登录豆瓣</a> </li> </ul> </div> </div> <div class="list-link" v-for="item in homelist"> <a class="thumbnail"> <div class="content"><img :src="item.images" alt="cover"> <h3>{{item.title}}</h3> <p>{{item.Matters}}</p> </div> <div class="author"><span class="name">{{item.author}}</span> <span class="label"> {{item.label}} </span> </div> </a> </div> <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading"> <loading></loading> <span slot="no-more"> 已经没有啦~~ </span> </infinite-loading> </div> </template> <script> import InfiniteLoading from \'vue-infinite-loading\'; import loading from "@/components/Loading" import axios from "axios" export default { name: "home", data() { return { homelist: [], isshow: false, page:0 } }, components: { InfiniteLoading, loading }, methods: { onInfinite() { var _this = this; var pagesize=3; _this.page+=1; axios.get(\'../../static/json/homelist.json\').then(function(data) { if(data.data.DoubanHeadlines.length>0) { if(pagesize*(_this.page)>=data.data.DoubanHeadlines.length) { _this.$refs.infiniteLoading.$emit(\'$InfiniteLoading:complete\'); }else{ for(var i=pagesize*((_this.page)-1);i<pagesize*(_this.page);i++){ _this.homelist.push(data.data.DoubanHeadlines[i]) ; _this.$refs.infiniteLoading.$emit(\'$InfiniteLoading:loaded\'); } } } else { console.log("3+:" + _this.homelist.length) _this.$refs.infiniteLoading.$emit(\'$InfiniteLoading:complete\'); } }).catch(function() { console.log("ajax error") }); }, } } </script> <style scoped="scoped"> .flex_40 { text-align: center; margin: 0 1.8rem; padding-top: .2rem; } .flex_40 ul { overflow: hidden; margin: 1rem; padding-top: .6rem; } .flex_40 li { float: left; width: 50%; padding: .3rem; box-sizing: border-box; font-size: 1.5rem; } .loading-default{ background: url(../assets/loading_green.gif) no-repeat 0 0 100% !important; } .flex_40 li a { display: block; max-width: 100%; padding: 1.2rem 0; line-height: 2rem; text-align: center; background-color: white; color: #494949; border-radius: .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; } .thumbnail { background-color: transparent; position: relative; display: block; padding: 2.5rem 1.8rem 2.5rem 0; margin-left: 1.8rem; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .thumbnail .content { overflow: hidden; margin-bottom: 1rem; } .thumbnail .content img { float: right; width: 25.6%; height: 8.678rem; margin-left: 2.5rem; } .thumbnail .content h3 { margin-top: 0; margin-bottom: .6rem; line-height: 1.41; text-align: justify; font-size: 1.7rem; font-weight: 500; color: #494949; } .thumbnail .content p { line-height: 1.5; text-align: justify; color: #aaa; font-size: 1.2rem; overflow: hidden; } .author { font-size: 1.2rem; color: #ccc; } .label { position: absolute; bottom: 2.5rem; right: 1.8rem; } </style>