vue-scroller没有更多数据

移云居客

2017-04-15

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>小白听营销</title>
    <link href="dist/css/icons.css" rel="stylesheet">
    <link href="dist/css/mui.css" rel="stylesheet">
    <link href="dist/css/app.css" rel="stylesheet">
</head>

<body>
    <header class="mui-bar mui-bar-nav">
        <div id="go-search" class="searchbar searchbar-block">
            <div class="searchbar-input"><i class="icon-search"></i><span>搜索感兴趣的人</span></div>
        </div>
    </header>

    <div class="mui-content" id="app2">
        <div class="title">热门名人</div>
        <scroller :on-refresh="refresh"
:on-infinite="infinite"
ref="my_scroller" style="padding-top: 44px;">
        <ul class="mui-table-view tutor-list mar-top-none" v-for="user in users">
            <li class="mui-table-view-cell mui-media media-middle">
                <a >
                    <div class="mui-media-object mui-pull-left verified">
                        <img src="dist/img/thumbnail.png" >
                    </div>
                    <div class="mui-media-body">
                        {{user}}
                        <p class="mui-ellipsis">经理</p>
                        <p>110个回答，110人关注</p>
                    </div>
                    <span class="mui-btn ask-btn"><i class="icon-ask-line"></i> 问问</span>
                </a>
            </li>

        </ul>
            </scroller>

    </div>
    
    <script src="dist/js/jquery.min.js"></script>
    <script src="dist/js/mui.min.js"></script>
    <script src="dist/vue/vue.js"></script>
    <script src="dist/vue/vue-resource.js"></script>
    <script src="dist/vue/vue-scroller.min.js"></script>
    <script src="dist/vue/public.js"></script>
    <script src="dist/request/testLoadMore.js"></script>
    <script>
       /* mui('.mui-scroll-wrapper').scroll();*/
document.getElementById('go-search').addEventListener('tap', function() {
          mui.openWindow({
            url: 'search.html'
});
        });
    </script>
</body>

</html>

testLoadMore.js

/**
 * Created by 细福 on 2017/4/13.
 */
var me=new Vue({
    el:"#app2",
    data:{

        users:[],
        totalCount:0,
        pageIndex:1,
        pageSize:10,
        noData:false
},
    mounted:function () {
        console.log("mounted..........")

        this.addData();
    },
    methods:{

      
        addData:function () {
            if(this.pageIndex==1){
                this.users.splice(0,this.users.length);
            }
                for (var i = 0; i < 10; i++) {
                    this.users.push((this.users.length ) + "");
                }

            if(this.pageIndex==1){

                this.$refs.my_scroller.finishPullToRefresh();
                this.noData=false;
            }else{
                    if(this.users.length>=20) {
                        this.noData = true;
                    }

                        setTimeout(() => {
                            this.$refs.my_scroller.finishInfinite(0);
                   })

            }


        },
        refresh: function () {
            setTimeout(()=> {
                this.pageIndex=1;
              this.addData();

        }, 1500)
        },

        infinite: function () {
             if(this.noData){
                 setTimeout(() => {
                     this.$refs.my_scroller.finishInfinite(2);
             })
                 return;
             }
            setTimeout(() => {
                this.pageIndex+=1;
            this.addData();

        }, 1500)
        }
    }
});

mui css