<div id="app">
<div class="infinite-list-wrapper" style="overflow:auto">
<ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
<li v-for="news in newsList" class="list-item">{{ news.newsTitle }}</li>
</ul>
<el-row style="height: 50px" v-if="loading"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.3)"></el-row>
<p v-if="noMore">没有更多了</p>
</div>
</div>
<style>
.infinite-list-wrapper {
width: 100%;
height: 300px;
border: 1px solid rebeccapurple;
}
.list {
width: 100%;
}
.list li {
height: 30px;
margin: 5px 0;
background: #8c939d;
list-style: decimal;
}
.infinite-list-wrapper p {
text-align: center;
}
</style>
<script>
(function () {
const vm = new Vue({
el:"#app",
data(){
return {
loading: false,
newsList:[],
pages:1,
currentPage:1
}
},
computed: {
noMore () {
return this.currentPage>=this.pages;
},
disabled () {
return this.loading || this.noMore
}
},
methods: {
load () {
this.loading = true;
axios.get("/news/get",{
params: {
pageNum: vm.currentPage+1,
pageSize:10
}
}).then(function (response) {
let pageInfo = response.data;
console.log(pageInfo);
pageInfo.data.forEach(function (item) {
vm.newsList.push(item);
});
vm.currentPage = pageInfo.current;
vm.loading = false;
}).catch(function (error) {
console.log(error);
})
}
},
created(){
axios.get("/news/get",{
params: {
pageNum: 1,
pageSize:10
}
}).then(function (response) {
let pageInfo = response.data;
console.log(pageInfo);
pageInfo.data.forEach(function (item) {
vm.newsList.push(item);
});
vm.pages = pageInfo.pages;
}).catch(function (error) {
console.log(error);
})
}
})
})();
</script>

vue+element ui 滚动加载的更多相关文章

  1. vue 原生添加滚动加载更多

    vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱.我们在mounted建立滚动,destroyed销毁滚动. mounted () { window.addEven ...

  2. element ui loading加载开启与关闭

    参考:https://blog.csdn.net/qq_41877107/article/details/87690555 Vue项目引入element-ui,之后,将以下代码写入 mounted() ...

  3. Vue + Element UI 实现权限管理系统 前端篇(十):动态加载菜单

    动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...

  4. Vue + Element UI 实现权限管理系统(动态加载菜单)

    动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...

  5. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  6. Vue滚动加载自定义指令

    用Vue在移动端做滚动加载,使用mint-ui框架, InfiniteScroll指令loadmore组件,在uc浏览器和qq浏览器都无法触发.无奈我只能自己写了. 决定用vue 的自定义指令 写滚动 ...

  7. 笔记-VUE滚动加载更多数据

    来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 data() { return { loading: ...

  8. 关于Vue+iview的简单下拉框滚动加载

    话不多说,直接上代码,作用是下拉框内容无限滚动加载: Html: <FormItem style="position:relative" label="用户名:&q ...

  9. Vue无限滚动加载数据

    Web项目经常会用到下拉滚动加载数据的功能,今天就来种草Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装 npm install vue-infinite-load ...

随机推荐

  1. ARC093 F - Dark Horse

    https://atcoder.jp/contests/arc093/tasks/arc093_d 题解 先钦定\(1\)号站在第一个位置上,那么他第一轮要和\((2)\)打,第二轮要和\((3,4) ...

  2. RabbitMQ + Springboot +“Hello Word”

    https://www.rabbitmq.com/getstarted.html 官网文档 我们将呼叫我们的消息发布者(发送者)发送和我们的消息消费者(接收者) Recv.发布者将连接到RabbitM ...

  3. Day3 01 枚举

    枚举:关键字 enum  主要为了限定了选择范围,声明了一组相关的值类型的集合. 1.枚举类型,实质上是整整 2.如果不进行赋值操作,枚举类型从0开始递增. 3.枚举不能定义字段 属性  方法. 例如 ...

  4. Oracle JET(三)Oracle JET 响应布局

    Oracle JET 提供了一系列的 CSS 样式以直接使用. Oracle JET CSS样式链接:http://docs.oracle.com/middleware/jet310/jet/refe ...

  5. cdn for js library

    https://cdnjs.com/libraries/jquery https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js htt ...

  6. be of +名词 = 形容词 (词性变化) ; || it is adj. of + 人称宾格 = 人称主格 + 形容词 (人称变化)

    be of +名词 = 形容词 这是一种常用的构词法 of + 名词 就等于 对应的形容词, 这也是, 扩展词汇的一种方法. 原则上你可以任意使用, 但是, 通常只是针对 那些形容词, 名词相对来说比 ...

  7. JS - 创建只读属性

    一:为私有变量创建get()方法 这种方式可以创建 "伪 "只读属性.这并不是一种好方法,因为使用_函数_获得只读的_属性_不太符合一般的逻辑. /** * Represent a ...

  8. python-网络编程requests模块

    urllib模块去请求的确比较麻烦,需要不断的encode和decode:而requests模块就比较方便了,它是基于requests模块开发的第三方模块,安装简单只需要  pip install r ...

  9. C printf格式化输出 的跨平台

    printf()在不同的系统上,占位符的可能有不同的写法,如: %ld:long int, 32位平台4 bytes %lld: long long int, 32位平台8 bytes 可以考虑使用  ...

  10. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_07 缓冲流_6_BufferedReader_字符缓冲输入流

    读取到的是第一行数据 读取多行数据 使用循环