对照着jquery来学vue.js系列之配合thinkphp下拉获取分页数据
上篇文章介绍了vue.js如何ajax获取数据；
接着不可避免就遇到的是；
如何进行数据分页呢？
这里以thinkphp为示例讲解；其他场景性质一样；
示例项目：http://git.oschina.net/shuaibai123/thinkphp-bjyadmin
示例链接：localhost/home/vue/web_page
项目中有张表province_city_area；
里面是全国的3000多个城市；这里就拿它做分页了；
一：thinkphp获取分页数据/application/home/controller/vuecontroller.class.php
    /**
     * 配合thinkphp分页示例
     */
    public function page(){
        // 获取总条数
        $count=m('province_city_area')->count();
        // 每页多少条数据
        $limit=100;
        $page=new \org\nx\page($count,$limit);
        $data=m('province_city_area')
            ->limit($page->firstrow.','.$page->listrows)
            ->select();
        echo json_encode($data);
    }二：前端接收数据的核心部分；
要实现的是移动端往那种下拉就加载数据的效果；
首先是先用ready方法加载第一页的数据显示到页面中；
设置一个变量i=1；var vm=new vue({
    el: '.box',
    data: {
        city: []
    },
    ready: function(){
        this.$http.get(url).then(function(response){
            this.city=response.data;
        })
    },
})然后呢；判断当滚动轴到底部的时候；
让i+1 作为get参数中的页数；
加载下一页的数据；并追加到city中；i++
vm.$http.get(pagedata.url+'/p/'+pagedata.i).then(function(response){
    // 用concat把下一页的数据追加到city中
    vm.city=vm.city.concat(response.data); 
})三：完整的html；
/tpl/home/vue/web_page.htmlnbsp;html>
vue 配合thinkphp分页示例
{{item.name}}
没有数据了
这已经简单的实现了下拉加载数据的功能；
别被上面这么长的代码吓到了；
里面更多的是用原生的js实现滚动轴监听事件的；
那个加载中和加载完成的样式根据业务设计就好了；
得；最近被一些事搞的很不在状态；
这篇跳票了好多天的文章终于写完了；
更多的直接查看源代码和注释吧；
白俊遥博客 http://baijunyao.com/article/88