vuejs实现瀑布流布局（二）

瀑布流布局已然完成，那么剩下的就是另一个比较大的工程了——无限加载。

之前说了，这个活动项目是基于SUI-Mobile搭建的，所以可以直接使用sui内建组件“无限加载”来实现这个功能。

没有真实的数据，所有数据都是自己创建的假数据

以works.json为例：

[
  {
    "id": 1,
    "src": "http://cued.xunlei.com/demos/publ/img/P_000.jpg",
    "numbering":"00001",
    "school":"双语小学",
    "student":"王伟",
    "praise":"23",
    "isDel": true,
    "delDesc": "图片不符合法律要求",
    "name": "美美的一天",
    "todayClk": false,
    "isPraise": false
  },
  ...     
]

一个数组，里面是一个个的对象。

最开始实现的时候，是在methods对象里面定义一个初始化请求函数，一个分页请求函数

      fetchData(fn){
        var _this = this;
        axios.get("./src/assets/data/worksRank.json").then(function (res) {
          _this.worksList=res.data
          if (typeof fn =="function") fn();
        })
      },
      loadingMore(){
        var _this = this;
        var loading = false;

        // 每次加载添加多少条目
        var itemsPerLoad = 10,
            page = 2;
        // 注册'infinite'事件处理函数
        $(document).on('infinite',  function() {
          
          // 如果正在加载，则退出
          if (loading) return;

          // 设置flag
          loading = true;

          // 模拟1s的加载过程，实际项需要调用ajax向后台取数据
       
              // 重置加载flag
          axios.get('./src/assets/data/worksRank.json', {
              page: page,
              val: ""
            }).then(function (response) {
              loading = false;

              
              //添加判断条件  如果返回的数组的数据小于每页应当加载的数据条数，则表示加载完毕
              if (response.data.length < itemsPerLoad) {
                  // 加载完毕，则注销无限加载事件，以防不必要的加载
                  $.detachInfiniteScroll($('.infinite-scroll'));
                  // 删除加载提示符
                  $('.infinite-scroll-preloader').remove();
                  return;
              }

              // 添加新条目
              // _this.addWorks(response.data);
              _this.worksList = _this.worksList.concat(response.data);
              page++;
              //容器发生改变,如果是js滚动，需要刷新滚动
              $.refreshScroller();
            });
        });
      }

然后在mounted内调用这两个函数，发现很快实现该无限加载的功能了。再继续研究下去，也受到一片文章的启发，其实所谓无限加载，不就是我们常说的分页么？

改变思路如下：

当页面滑动到底部的时候，仅仅增加页码，然后监听页码的变化，然后调用初始化时候的ajax请求，去请求后台数据。

      loadingMore(){
        var _this = this;
        // 注册'infinite'事件处理函数
        $(document).on('infinite', function() {
          // 如果正在加载，则退出
          if (_this.loading) return;
          // 设置flag
          _this.loading = true;
          // 无限加载，其实就是类似于分页的效果，增加页码
          _this.page++;
        });
      },

    watch: {
      page: function () {
        this.ajaxData();
      }
    }

向后台请求数据，需要带两个参数，一个是页码page，一个是值val，该值是为了搜索功能使用。

其他的操作全部放在ajax请求内部操作：

      ajaxData(){
        axios.get('./src/assets/data/works.json',{
          page: this.page,
          val: this.val
        }).then(function (response) {
          this.loading = false;
          // 为了美观，这里对获取到的推按进行了随机数的处理，实际项目中，不需要额外处理
          response.data.forEach(function (item, index) {
            var num = Math.ceil(Math.random()*162);
            num = num < 10 ? "00"+num : num < 100 ? "0" + num : num;
            item.src = item.src.replace(/[d]+/, num);
            // 预加载
            var img = new Image();
            img.src = item.src;
          });

          //添加判断条件  如果返回的数组的数据小于每页应当加载的数据条数，则表示加载完毕
          if (response.data.length < this.items) {
              // 加载完毕，则注销无限加载事件，以防不必要的加载
              $.detachInfiniteScroll($('.infinite-scroll'));
              // 删除加载提示符
              $('.infinite-scroll-preloader').remove();
              return;
          }
          if (this.page == 1) {
            this.works = response.data;
          } else {
            this.works = this.works.concat(response.data);
          }

          // 如果是下拉刷新的话
          $.pullToRefreshDone('.pull-to-refresh-content');

        }.bind(this));
      },

对于返回数据循环操作这一步可以不予关注，我这里主要是为了获取不同的图片，进行的随机数，实际请求过程中，每次返回的都是不同数据，不存在这一过程。

还有一个判断 ：

          if (this.page == 1) {
            this.works = response.data;
          } else {
            this.works = this.works.concat(response.data);
          }

　这里需要判断当前页码是否为1，如果为1的话，返回的数据直接赋值给works，如果不是1，则在原有值的基础上追加，目的是方便下拉刷新和搜索。

　原以为到这里，已经彻底完成工作，但是在多次测试之后发现，还有一个更大的bug在那呢！

　路由跳转之后，必须刷新页面，才能实现新页面的无限加载，发现该问题之后，立即意识到了问题之所在：

   由于路由点击之后，并没有为document绑定infinite事件，导致跳转之后的页面无法触发infinite事件，就无法实现无限加载。

解决问题的思路在于：在路由跳转页面的时候，关闭之前组件绑定的infinite事件，而在新组件中重新绑定infinite事件。

查询vue-router官方文档，发现“导航钩子”这一说法，共有三个钩子函数：

• beforeRouteEnter
• beforeRouteUpdate (2.2 新增)
• beforeRouteLeave

这里需要用到的是beforeRouteLeave，在路由跳转离开的时候，关闭当前页面注册的“无限滚动事件”，在新组件mounted的时候重新绑定“无限滚动事件”，代码修改为：

   beforeRouteLeave (to, from, next) {
      this.page =1;
      $.detachInfiniteScroll($(".infinite-scroll"));
      next(true);
    },

　　

    mounted(){
      $.init()
      this.refresh();
      this.ajaxData();
      this.loadingMore();
      $.attachInfiniteScroll($(".infinite-scroll"));
    },

至此，使用vuejs搭配SUI-Mobile的瀑布流布局真正实现了，其中也遇到了各种槽点，初学vuejs，总得付出点填坑的代价的。