vue+element ui 滚动加载
<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 滚动加载的更多相关文章
- vue 原生添加滚动加载更多
vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱.我们在mounted建立滚动,destroyed销毁滚动. mounted () { window.addEven ...
- element ui loading加载开启与关闭
参考:https://blog.csdn.net/qq_41877107/article/details/87690555 Vue项目引入element-ui,之后,将以下代码写入 mounted() ...
- Vue + Element UI 实现权限管理系统 前端篇(十):动态加载菜单
动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...
- Vue + Element UI 实现权限管理系统(动态加载菜单)
动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
- Vue滚动加载自定义指令
用Vue在移动端做滚动加载,使用mint-ui框架, InfiniteScroll指令loadmore组件,在uc浏览器和qq浏览器都无法触发.无奈我只能自己写了. 决定用vue 的自定义指令 写滚动 ...
- 笔记-VUE滚动加载更多数据
来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 data() { return { loading: ...
- 关于Vue+iview的简单下拉框滚动加载
话不多说,直接上代码,作用是下拉框内容无限滚动加载: Html: <FormItem style="position:relative" label="用户名:&q ...
- Vue无限滚动加载数据
Web项目经常会用到下拉滚动加载数据的功能,今天就来种草Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装 npm install vue-infinite-load ...
随机推荐
- 01-pandas基础-Series与DataFrame
一.Series: 1,介绍:Series是以中类似于一维数组的对象,由一维数组以及与之相关的标签组成 特点:索引在左边,值在右边.在创建时,若我们未给数据指定索引,Series会自动创建一个0到N- ...
- linux 挂载磁盘指令
fdisk -l (先df -h,如果没有xvdb盘信息,则敲这条指令) fdisk /dev/xvdb (进入对话状态,一问一答,结束后要保存w或者删除q) mkfs.ext3 /dev/xv ...
- Python List 列表list()方法
Python基础数据类型之一列表list,在python中作用很强在,列表List可以包含不同类型的数据对像,同时它是一个有序的变量集合,每个变量可以存储一个地址.所有序列能用到的标准操作方法,列表也 ...
- ODB Examples
http://www.codesynthesis.com/products/odb/examples.xhtml The following list gives an overview of the ...
- vue 的sync用法
这个关键字在v2.3.0+ 新增,注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的).说白了 ...
- python生成requirements.txt 导出项目依赖
使用pip freeze $ pip freeze > requirements.txt 这种方式是把整个环境中的包都列出来了,如果是虚拟环境可以使用. 通常情况下我们只需要导出当前项目的req ...
- VMware 虚拟化编程(2) — 虚拟磁盘文件类型详解
目录 目录 前文列表 虚拟磁盘文件 VMDK 用户可以创建的虚拟磁盘类型 VixDiskLib 中支持的虚拟磁盘类型 虚拟机文件类型 前文列表 VMware 虚拟化编程(1) - VMDK/VDDK/ ...
- Linux_SquidProxyServer代理服务器
目录 目录 Squid proxy server Web proxy server operating principle Squid features Setup squid server Setu ...
- 阶段1 语言基础+高级_1-2 -面向对象和封装_16this关键字的作用
this主要是在重名的情况下 ,起到区分的效果 新建demo04的包,里面新建类Person 通过this.进行区分 this关键字可以解决重名 分不开的问题 这里的person调用的sayHello ...
- 解决Chrome网页编码显示乱码的问题
解决Chrome网页编码显示乱码的问题 记得在没多久以前,Google Chrome上面出现编码显示问题时,可以手动来调整网页编码问题,可是好像在Chrome 55.0版以后就不再提供手动调整编码,所 ...