之前在项目中一直使用的是 element-ui
但需要使用到流加载数据，这个 element-ui 中没有
没关系，这个流加载 在layui 中有现成的，下面让我们使用 layui :
demo: http://www.layui.com/demo/flow.html
vuejs 是项目根目录
下载解压后，把 layui 放到 vuejs/static里面 ， 目录如下：
编辑 vuejs/index.html , 加载 layui ,内容如下
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
-
<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">
-
<link rel="stylesheet" type="text/css" href="./static/layui/css/layui.css">
-
<script type="text/javascript" src="./static/layui/layui.js">
</script>
-
<title>我的博客
</title>
-
</head>
-
<body>
-
<div id="app">
</div>
-
<!-- built files will be auto injected -->
-
</body>
-
</html>
新建一个组件 vuejs/src/components/layui/flowdemo.vue 内容如下:
-
<template>
-
<div>
-
<ul class="flow-default" id="LAY_demo2">
</ul>
-
</div>
-
</template>
-
<script>
-
export
default {
-
data () {
-
return {
-
-
}
-
},
-
mounted:
function () {
-
this.$nextTick(
function () {
-
window.layui.use(
'flow',
function(){
-
let flow =
window.layui.flow
-
-
flow.load({
-
elem:
'#LAY_demo2'
// 流加载容器
-
,
scrollElem:
'#LAY_demo2'
// 滚动条所在元素，一般不用填，此处只是演示需要。
-
,
isAuto:
false
-
,
isLazyimg:
true
//
-
,
done:
function(page, next){
// 加载下一页
-
// 模拟插入
-
setTimeout(
function(){
-
let lis = [];
-
for(
let i =
0; i <
6; i++){
-
lis.push(
'<li><img lay-src="http://s17.mogucdn.com/p2/161011/upload_279h87jbc9l0hkl54djjjh42dc7i1_800x480.jpg?v='+ ( (page
-1)*
6 + i +
1 ) +
'"></li>')
-
}
-
next(lis.join(
''), page <
6)
// 假设总页数为 6
-
},
500);
-
}
-
})
-
-
})
-
})
-
}
-
}
-
</script>
-
编辑 vuejs/src/router/index.js , 添加组件和路由，内容如下：
最后访问即可： http://localhost:8081/#/flow 效果如下：
