<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. 01-pandas基础-Series与DataFrame

    一.Series: 1,介绍:Series是以中类似于一维数组的对象,由一维数组以及与之相关的标签组成 特点:索引在左边,值在右边.在创建时,若我们未给数据指定索引,Series会自动创建一个0到N- ...

  2. linux 挂载磁盘指令

    fdisk -l    (先df -h,如果没有xvdb盘信息,则敲这条指令) fdisk /dev/xvdb (进入对话状态,一问一答,结束后要保存w或者删除q) mkfs.ext3 /dev/xv ...

  3. Python List 列表list()方法

    Python基础数据类型之一列表list,在python中作用很强在,列表List可以包含不同类型的数据对像,同时它是一个有序的变量集合,每个变量可以存储一个地址.所有序列能用到的标准操作方法,列表也 ...

  4. ODB Examples

    http://www.codesynthesis.com/products/odb/examples.xhtml The following list gives an overview of the ...

  5. vue 的sync用法

    这个关键字在v2.3.0+ 新增,注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的).说白了 ...

  6. python生成requirements.txt 导出项目依赖

    使用pip freeze $ pip freeze > requirements.txt 这种方式是把整个环境中的包都列出来了,如果是虚拟环境可以使用. 通常情况下我们只需要导出当前项目的req ...

  7. VMware 虚拟化编程(2) — 虚拟磁盘文件类型详解

    目录 目录 前文列表 虚拟磁盘文件 VMDK 用户可以创建的虚拟磁盘类型 VixDiskLib 中支持的虚拟磁盘类型 虚拟机文件类型 前文列表 VMware 虚拟化编程(1) - VMDK/VDDK/ ...

  8. Linux_SquidProxyServer代理服务器

    目录 目录 Squid proxy server Web proxy server operating principle Squid features Setup squid server Setu ...

  9. 阶段1 语言基础+高级_1-2 -面向对象和封装_16this关键字的作用

    this主要是在重名的情况下 ,起到区分的效果 新建demo04的包,里面新建类Person 通过this.进行区分 this关键字可以解决重名 分不开的问题 这里的person调用的sayHello ...

  10. 解决Chrome网页编码显示乱码的问题

    解决Chrome网页编码显示乱码的问题 记得在没多久以前,Google Chrome上面出现编码显示问题时,可以手动来调整网页编码问题,可是好像在Chrome 55.0版以后就不再提供手动调整编码,所 ...