vuejs+layui的使用

Vue2+VueRouter2+webpack+Axios 构建项目实战目录以及文件结构

之前在项目中一直使用的是 element-ui

但需要使用到流加载数据，这个 element-ui 中没有

没关系，这个流加载在layui 中有现成的，下面让我们使用 layui :

官网：http://www.layui.com/

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 () {
      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 , 添加组件和路由，内容如下：

最后访问即可： http://localhost:8081/#/flow 效果如下：

猜你喜欢