<!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)
}
}
}); 