mui上拉加载插件+Vue
由于比较简单，所以直接上代码，所有文件已经打包好。下载地址：http://download.csdn.net/detail/u010981786/9895062<!doctype html><html><head><meta charset="UTF-8"><title>mui上拉加载插件与Vue结合开发示例</title><meta
·
由于比较简单，所以直接上代码，所有文件已经打包好。下载地址：http://download.csdn.net/detail/u010981786/9895062
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>mui上拉加载插件与Vue结合开发示例</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="mui.min.css"/>
<link rel="stylesheet" href="customs.css" />
<link rel="stylesheet" href="home.css" />
</head>
<script>
window.onload = function(){
var fontSize = 100;
var elm = document.documentElement;
elm.style.fontSize = fontSize * (elm.clientWidth / 375) + 'px';
var h=document.documentElement?document.documentElement.clientHeight:document.body.clientHeight;
var objh = h - 0.5;
var Ft = fontSize * (elm.clientWidth / 375);
var conh = (parseInt(objh)/Ft).toFixed(2);
$(".mui-control-content").css("height",conh + "rem");
};
</script>
<style type="text/css">
body,html{background-color: #f0f0f0;}
.mui-control-content { height: 4rem;background-color: #f0f0f0; }
.mui-segmented-control{background: #fff;}
</style>
<body>
<div id="atApp">
<div class="mui-content">
<div class="booking mui-slider mui-fullscreen">
<div class="mui-control-content mui-active">
<div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary borderBu">
<a class="mui-control-item isBorderR mui-active" href="#item1">诊所</a>
<a class="mui-control-item isBorderR" href="#item2">医生</a>
</div>
<div class="mui-slider-group">
<div id="item1" class=" mui-control-content mui-active">
<div class="mui-scroll-wrapper" >
<div class="mui-scroll" lable='true'>
<ul class="mui-table-view">
<li class="mui-table-view-cell at_orderli" v-for="item in clinicList.data">
<div class="mui-navigate-right at_order">
<div class="at_clinicname at_left">{{item.clinicName}}</div>
<div class="at_ordernum at_right">{{item.orderCounts}}笔订单</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="item2" class=" mui-control-content">
<div class="mui-scroll-wrapper " data-scroll="1" style="overflow: scroll;">
<div class="mui-scroll" >
<ul class="mui-table-view">
<li class="mui-table-view-cell at_orderli" v-for="item in doctorList.data">
<div class="mui-navigate-right at_order">
<div class="at_clinicname at_left">{{item.doctorName}}</div>
<div class="at_ordernum at_right">{{item.orderCounts}}笔订单</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="mui.min.js"></script>
<script src="vue.js"></script>
<script src="vue-resource.min.js"></script>
<script src="jquery-3.1.0.min.js"></script>
<script src="mui.pullToRefresh.js"></script>
<script src="mui.pullToRefresh.material.js"></script>
<script type="text/javascript">
var mainScope = new Vue({
el: '#atApp',
data : {
clinicList:{data:[],pageNo:1,unreads:0},
doctorList:{data:[],pageNo:1,unreads:0},
beginDate: '2017/07/01',
endDate : '2017/07/01'
},
methods:{
/**
* 初始化Vue page
*/
initVuePage:function(){
//绑定上拉加载
$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
mui(pullRefreshEl).pullToRefresh({
up: {
callback: function() {
var self = this;
mainScope.loadMore({'self':self});
},
offset: 20,
contentinit: '<p style="text-align: center;">上拉显示更多</p>',
contentdown: '<p style="text-align: center;">上拉显示更多</p>',
contentrefresh: '<p style="text-align: center;">正在加载...</p>',
contentnomore:'<p style="text-align: center;">没有更多数据了</p>',
auto:true//第一次加载自动上拉一次
}
});
});
},
loadMore:function(data){
if($(data.self.element).attr('lable')){
mainScope.queryClinics(data);
}else{
mainScope.queryDoctors(data);
}
},
queryDoctors:function(data){
var records = 5;
//参数校验
Vue.http({
url:"data.txt",
method:'GET',
params:{
userID:85547640210818,
queryType:"1",
clinicID:50003,
'pageNO': mainScope.doctorList.pageNo,
'records': records
}
}).then(function(msg){
if(msg.body.code == '000000'){
mainScope.doctorList.data = mainScope.doctorList.data.concat(msg.body.data.queryList.data);
//mainScope.doctorList.unreads = msg.body.data.doctorNew;
mainScope.doctorList.pageNo++;
if(msg.body.data.queryList.recordsTotal <= mainScope.doctorList.pageNo * records){
data.self.endPullUpToRefresh(true);
}else{
data.self.endPullUpToRefresh();
}
}else {
console.log(msg.body.codeDesc)
}
});
},
queryClinics:function(data){
var records = 5;
//参数校验
Vue.http({
url:"data.txt",
method:'GET',
params:{
userID:85547640210818,
queryType:"1",
clinicID:50003,
'pageNO': mainScope.clinicList.pageNo,
'records' :records
}
}).then(function(msg){
if(msg.body.code == '000000'){
mainScope.clinicList.data = mainScope.clinicList.data.concat(msg.body.data.queryList.data);
mainScope.clinicList.unreads = msg.body.data.clinicNew;
mainScope.clinicList.pageNo++;
if(msg.body.data.queryList.recordsTotal <= mainScope.clinicList.pageNo * records){
data.self.endPullUpToRefresh(true);
}else{
data.self.endPullUpToRefresh();
}
}else {
console.log(msg.body.codeDesc)
}
});
}
}
});
mainScope.initVuePage();
</script>
</html>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)