版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/daily886/article/details/81707223
Vue2+VueRouter2+webpack+Axios 构建项目实战目录以及文件结构
之前在项目中一直使用的是 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 内容如下:
扫描二维码关注公众号,回复:
3010998 查看本文章
<template>
<div>
<ul class="flow-default" id="LAY_demo2"></ul>
</div>
</template>
<script>
export default {
data () {
return {
}
},
mounted: function () {
this.$nextTick(function () {
layui.use('flow', function(){
let flow = 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 , 添加组件和路由,内容如下: